Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Thenez vos promesses
Search
Deyine
June 24, 2018
Programming
0
120
Thenez vos promesses
Dans cette présentation, on fait le tour de l'evolution de la programmation asyncrone en JS
Deyine
June 24, 2018
Tweet
Share
More Decks by Deyine
See All by Deyine
Android development flow
deyine
3
140
MVP architecture
deyine
2
96
Other Decks in Programming
See All in Programming
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
2.6k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
3
600
CSC305 Lecture 10
javiergs
PRO
0
220
Software Architecture
hschwentner
6
2.3k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
600
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
390
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
110
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
CSC509 Lecture 06
javiergs
PRO
0
260
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Site-Speed That Sticks
csswizardry
13
920
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Rails Girls Zürich Keynote
gr2m
95
14k
Six Lessons from altMBA
skipperchong
29
4k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Transcript
THENEZ VOS PROMISES DEYINE JIDDOU Presented by:
THENEZ VOS PROMISES 2
THENEZ VOS PROMISES 3 La plupart du temps on écrit
du code synchrone AKA BLOCKING
THENEZ VOS PROMISES 4
THENEZ VOS PROMISES 5 Traitements lourds, difficile à optimiser MULTI-THREADING
THREAD POOL BACKGROUND WORKER INVOKE KILL/PAUSE ERROR HANDLING RETRY WAIT
THENEZ VOS PROMISES 6 En JAVASCRIPT, on fait les choses
différemment
THENEZ VOS PROMISES 7 Un seul Thread en Javascript
THENEZ VOS PROMISES 8 console.log(1); setTimeout(function() { console.log('Finished'); }, 10);
console.log(2); console.log(3); console.log(4);
THENEZ VOS PROMISES 9 The Event loop CALL STACK console.log(1)
THENEZ VOS PROMISES 10 The Event loop CALL STACK setTimeout
THENEZ VOS PROMISES 11 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers …
THENEZ VOS PROMISES 12 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers … console.log(2) …
THENEZ VOS PROMISES 13 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
THENEZ VOS PROMISES 14 The Event loop CALL STACK setTimeout
BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
THENEZ VOS PROMISES 15
THENEZ VOS PROMISES 16 function getMeetup() { var meetup; $.get('/meetup',
function(data) { meetup = data; }); return meetup; } var JsMeetup = getMeetup(); console.log(JsMeetup); // null
THENEZ VOS PROMISES 17 Traiter le résultat au moment de
la récupération
THENEZ VOS PROMISES 18 function getMeetup(callback) { $.get('/meetup', function(data) {
callback(data); }); } var JsMeetup = getMeetup(function(meetup) { console.log(JsMeetup); // Object });
THENEZ VOS PROMISES 19 function getMeetup(callback) { $.get('/meetup', function(data) {
$.get('/members', function(response) { callback(data); }); }); } var JsMeetup = getMeetup(function(meetup) { console.log(JsMeetup); // Object });
THENEZ VOS PROMISES 20 CALLBACK HELL
THENEZ VOS PROMISES 21 SPAGHETTI var JsMeetup = null; var
members = null; var finished = 0; function getMeetup() { $.get('/meetup', function(data) { JsMeetup = data; finished++; }); } function getMembers() { $.get('/members', function(data) { members = data; finished++; }); } getMeetup(); getMembers(); while (true) { if(finished == 2) { console.log(JsMeetup); // Object console.log(members); // Object break; }
THENEZ VOS PROMISES 22 Vous pouvez écrire une petite librairie
pour simplifier
THENEZ VOS PROMISES 23 En réalité beaucoup l’ont fait
THENEZ VOS PROMISES 24 PROMISES
THENEZ VOS PROMISES 25 Promise est tout simplement un OBJET
Représente le résultat de l’execution d’une fonction 3 états possibles • pending • fulfilled • rejected Supporté nativement Then-able
THENEZ VOS PROMISES 26 function getMeetup() { var task =
$.Deferred(); $.get('/meetup', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(function(data) { console.log(JsMeetup); });
THENEZ VOS PROMISES 27 function getMembers(meetup) { var task =
$.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(function(data) { return getMembers(data) }) .then(function(result) { console.log(result); }); Chaining
THENEZ VOS PROMISES 28 function getMembers(meetup) { var task =
$.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then((data) => { return getMembers(data) }) .then((result) => { console.log(result); }); Chaining
THENEZ VOS PROMISES 29 function getMembers(meetup) { var task =
$.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(data => getMembers(data)) .then(result => console.log(result)); Chaining
THENEZ VOS PROMISES 30 function getMembers(meetup) { var task =
$.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(getMembers) .then(console.log); Chaining
THENEZ VOS PROMISES 31 function getMembers(dateMeetup, meetup) { var task
= $.Deferred(); $.get(‘/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } var JsMeetup = getMeetup() .then(data => getMembers.bind(new Date(), data)) .then(console.log); Chaining
THENEZ VOS PROMISES 32 var JsMeetup = getMeetup() .then(data =>
getMembers(data)) .then(result => console.log(result)) .catch(err => { console.log('And error occured during data fetching'); }); Error handling
THENEZ VOS PROMISES 33 var JsMeetup = getMeetup() .then(data =>
{ if(!data || data.length == 0){ throw new Error('No meetup found'); } return getMembers(data); }) .then(result => console.log(result)) .catch(err => { console.log('And error occured during data fetching' + err); }); Error handling
THENEZ VOS PROMISES 34 var JsMeetup = getMeetup() .then(data =>
{ if(!data || data.length == 0){ throw new Error('No meetup found'); } return getMembers(data); }) .then(result => console.log(result)) .catch(err => { console.log('And error occured during data fetching' + err); }); Try / Catch / Finally
THENEZ VOS PROMISES 35 PROMISES
THENEZ VOS PROMISES 36 PROMISES ES7 - couche au dessus
des Promises
THENEZ VOS PROMISES 37 var config; return SmsConfig.find() .exec() .then(selectMatchedConfig.bind(null,
sms)) // Ordre des params .then(c => { config = c; // Réutilisation d’un résultat return extractValues(sms, config); }) .then(vals => { prepareDetectorParams(vals); return updateTransaction(sms, config, vals); }); PROMISE HELL
THENEZ VOS PROMISES 38 async function getMeetup() { var task
= $.Deferred(); $.get('/meetup', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); return task.promise(); } async function getMembers(meetup) { var task = $.Deferred(); $.get('/meetup/' + meetup.id + '/members', function(data) { task.resolve(data); }, function(err) { task.reject(err); }); ASYNC / AWAIT
THENEZ VOS PROMISES 39 (async () => { try {
startSpinner(); var meetup = await getMeetup(); var members = await getMembers(meetup); console.log(meetup); stopSpinner(); } catch(err) { displayError(); } })() ASYNC / AWAIT
THENEZ VOS PROMISES 40 ASYNC / AWAIT HELL AWAIT AWAIT
AWAIT AWAIT AWAIT
THENEZ VOS PROMISES 41 Parallèle Await uniquement si le résultat
d’une fonction est utile Regrouper les Await lié Promise.all
THANK YOU!