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
95
Other Decks in Programming
See All in Programming
Understanding Ruby Grammar Through Conflicts
yui_knk
1
140
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
270
令和最新版手のひらコンピュータ
koba789
14
8k
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
CSC305 Summer Lecture 05
javiergs
PRO
0
110
私の後悔をAWS DMSで解決した話
hiramax
4
140
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.1k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Practical Orchestrator
shlominoach
190
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Agile that works and the tools we love
rasmusluckow
329
21k
Designing for humans not robots
tammielis
253
25k
Site-Speed That Sticks
csswizardry
10
790
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
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!