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

非同期プログラミングPromiseに入門

 非同期プログラミングPromiseに入門

JavaScriptの非同期プログラミングの手法の一つ、Promiseを説明したスライド。HTML5ビギナーズの第12回の登壇内容です。

Yohei Munesada

August 27, 2015
Tweet

More Decks by Yohei Munesada

Other Decks in Technology

Transcript

  1. doAsync1(function(v1){ doAsync2(function(v2){ doAsync3(function(v3){ doAsync4(function(v4){ console.debug(v4); }); }); }); }); doAsync1()

    .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function(v4){ console.debug(v4); }); 1SPNJTFͷ৔߹ $BMMCBDLͷ৔߹
  2. // Promiseͷ࡞੒ var p = new Promise(function (resolve, reject) {});

    // ੒ޭ࣌ͷॲཧ p.then(function (value) {}); // ࣦഊ࣌ͷॲཧ p.catch(function (reason) {}); ֓ཁͭͷίʔυ
  3. // resolveͰ੒ޭ var p = new Promise(function (resolve, reject) {

    resolve(1); }); // ੒ޭͨ͠Βthen͕ݺ͹ΕΔ p.then(function (value) { console.log(value); // 1 }); Pending => Resolved
  4. Pending => Rejected // rejectͰࣦഊ var p = new Promise(function

    (resolve, reject) { rejected(‘error is occurred’); }); // ࣦഊͨ͠Βcatch͕ݺ͹ΕΔ p.catch(function (error) { console.log(error); // ‘error is occurred’ });
  5. var p = new Promise(function (resolve, reject) { var img

    = new Image(); img.src = ‘./rss.png'; img.onload = function () {resolve(this);} image.onerror = function () {reject('fail');} }); p.then(function (image) { console.debug(image); }); p.catch(function (reason) { console.debug(reason); }); ࣮ફαϯϓϧ
  6. getJson(‘./book.json’).then(function (book) { return new Promise (function (resolve, reject) {

    var image = new Image(); image.src = book.imageUrl; image.onload = function () {resolve(this)}; }); }).then (function (image) { console.log(‘image:’, image); }); UIFO͸νΣʔϯͰ͖Δᶄ1SPNJTFΛฦ٫͢Δ
  7. ᶃ՚ྷͳΤϥʔϋϯυϦϯά$BMMCBDLฤ doAsync1 (function (result) { if (isError(result)) treatError(); doAsync2 (function

    (result) { if (isError(result)) treatError(); doAsync3 (function (result) { if (isError(result)) treatError(); finishAction(); }); }); }); Τϥʔॲཧ Τϥʔॲཧ Τϥʔॲཧ
  8. ᶄ՚ྷͳύϥϨϧॲཧ$BMMCBDLฤ var results =[], numOfAction = 2; doAsync1 (function (result)

    { results.push(result); if (results.length === numOfAction) finishAction(); }); doAsync2 (function (result) { results.push(result); if (results.length === numOfAction) finishAction(); });
  9. ᶅ͍ͭͰ΋ݺͼग़͠Մೳ$BMMCBDLฤ var img = document.querySelector('img'); img.onload = function () {

    finishAction(this); } if (img.complete) { finishAction(this); } // ը૾ͷಡΈࠐΈঢ়گʹ߹Θͤͨ // ࣮૷Λ͢Δඞཁ͕͋Γେมɾɾɾ
  10. K2VFSZEFGFSSFEͰ1SPNJTFίʔσΟϯά // ੒ޭ͢Δ৔߹ function doAsync () { var d =

    new $.Deferred(); d.resolve(1); return d.promise(); } doAsync().then(function (value) { console.debug(value); // 1 });
  11. K2VFSZEFGFSSFEͰ1SPNJTFίʔσΟϯά // ࣦഊ͢Δ৔߹ function doAsync () { var d =

    new $.Deferred(); d.reject(‘something is strange’); return d.promise(); } doAsync().fail(function (reason) { console.debug(reason); //‘something is strange’ });
  12. ࢀߟ63-1SPNJTFؔ࿈ 㾎 +BWB4DSJQU1SPNJTFT5IFSFBOECBDLBHBJO)5.-3PDLT 㾎 1SPNJTF" ࢓༷ΛνϡʔτϦΞϧܗࣜͰৄ͘͠ղઆ͠·͢:PIFJ./&5 㾎 1SPNJTFTϒϥ΢βʔ+BWB4DSJQUͷ৽͍͠ඇಉظඪ४ʹͳΔ͔ʁ*OGP2 㾎 ࠓߋ͚ͩͲ1SPNJTFೖ໳2JJUB

    㾎 ͸͡Ίͯͷ1SPNJTF2JJUB 㾎 +BWB4DSJQU1SPNJTFͷຊB[VHJUIVCJP 㾎 /PEFKTͷίʔϧόοΫ஍ࠈΛ1SPNJTF΍(FOFSBUPSΛ࢖ͬͯղফ͢Δ1045% 㾎 1SPNJTF+BWB4DSJQUc.%/ 㾎 &$."4DSJQU-BOHVBHF4QFDJpDBUJPO&$."UI&EJUJPO