Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Thenez vos promesses

Deyine
June 24, 2018

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

More Decks by Deyine

Other Decks in Programming

Transcript

  1. THENEZ VOS PROMISES 5 Traitements lourds, difficile à optimiser MULTI-THREADING

    THREAD POOL BACKGROUND WORKER INVOKE KILL/PAUSE ERROR HANDLING RETRY WAIT
  2. THENEZ VOS PROMISES 11 The Event loop CALL STACK setTimeout

    BROWSER DOM Events XHR(Ajax) Timers …
  3. THENEZ VOS PROMISES 12 The Event loop CALL STACK setTimeout

    BROWSER DOM Events XHR(Ajax) Timers … console.log(2) …
  4. THENEZ VOS PROMISES 13 The Event loop CALL STACK setTimeout

    BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
  5. THENEZ VOS PROMISES 14 The Event loop CALL STACK setTimeout

    BROWSER DOM Events XHR(Ajax) Timers … console.log(2) … EVENT QUEUE Function1
  6. THENEZ VOS PROMISES 16 function getMeetup() { var meetup; $.get('/meetup',

    function(data) { meetup = data; }); return meetup; } var JsMeetup = getMeetup(); console.log(JsMeetup); // null
  7. THENEZ VOS PROMISES 18 function getMeetup(callback) { $.get('/meetup', function(data) {

    callback(data); }); } var JsMeetup = getMeetup(function(meetup) { console.log(JsMeetup); // Object });
  8. 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 });
  9. 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; }
  10. 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
  11. 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); });
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. THENEZ VOS PROMISES 41 Parallèle Await uniquement si le résultat

    d’une fonction est utile Regrouper les Await lié Promise.all