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

Promise完全攻略

E63c0cf4a77b1799e02f97689db83d91?s=47 kaidouji85
October 14, 2016

 Promise完全攻略

E63c0cf4a77b1799e02f97689db83d91?s=128

kaidouji85

October 14, 2016
Tweet

More Decks by kaidouji85

Other Decks in Technology

Transcript

  1. Promise׬શ߈ུ ळͷJavaScriptࡇɹin mixi ʙळͷJavaScriptऩ֭ࡇʙ 2016/10/15 ஛಺ɹ༎հ

  2. ࣗݾ঺հ ஛಺ɹ༎հ ϓϩάϥϚʔͰ͢ ීஈ͸javascriptɺ java࢖ͬͯ·͢

  3. ΞδΣϯμ ϓϩϩʔά Promiseͱඇಉظॲཧͷઆ໌ Promiseͷجຊతͳ࢖͍ํ Promiseͷಋೖํ๏ ·ͱΊ

  4. Promiseͱ͍͑͹ ܅ͨͪ΍ͬͺΓ ϓϩϛεͩ Ͱ͕͢

  5. jsͰͷPromiseͱ͸ ඇಉظॲཧΛ εϚʔτʹॻ͘࢓૊Έ

  6. ͨͩɺॳ৺ऀʹͱͬͯ͸ ϋʔυϧ͕ߴͦ͏ͳͷ΋ࣄ࣮

  7. େৎ෉ɺ͜ͷػձʹ ׬શ߈ུͪ͠Ό͍·͠ΐ͏

  8. ΞδΣϯμ ϓϩϩʔά Promiseͱඇಉظॲཧͷઆ໌ Promiseͷجຊతͳ࢖͍ํ Promiseͷಋೖํ๏ ·ͱΊ

  9. Promiseͱ͸ ඇಉظॲཧΛεϚʔτʹॻͨ͘Ίͷ࢓૊ΈͰ͢ ίʔϧόοΫ஍ࠈΛղফͰ͖·͢ ඇಉظ͕ΒΈͷΤϥʔϋϯυϦϯάΛεϚʔτ ʹ͔͚·͢

  10. ඇಉظॲཧͱ͸ processA processB αʔόϦΫΤετͳͲ ͕͔͔࣌ؒΔॲཧ

  11. ඇಉظॲཧͱ͸ processA processB αʔόϦΫΤετͳͲ ͕͔͔࣌ؒΔॲཧ processA(); processB();

  12. ඇಉظॲཧͱ͸ processA processB αʔόϦΫΤετͳͲ ͕͔͔࣌ؒΔॲཧ processA(); processB(); ͜͏͸ॻ͚ͳ͍

  13. ඇಉظॲཧͱ͸ processA(function() { processB(); }); ࣮ࡍʹ͸͜͏ॻ͘ processA͕ऴΘͬͨ͋ͱʹ࣮ߦ͢Δؔ਺Λ౉͢ ˢ͜͏͍͏ͷΛίʔϧόοΫؔ਺ͱ͍͏

  14. ΞδΣϯμ ϓϩϩʔά Promiseͱඇಉظॲཧͷઆ໌ Promiseͷجຊతͳ࢖͍ํ Promiseͷಋೖํ๏ ·ͱΊ

  15. ྫ୊ processA Լਤͷॱ൪ͰɺඇಉظॲཧΛߦ͏ͱ͢Δ ͜ΕΛίʔϧόοΫɺPromiseͰॻ͘ processB processC processD

  16. ίʔϧόοΫͰॻ͍ͨ৔߹ processA(function() { processB(function() { processC(function() { processD(); }); });

    }); ؔ਺ΛݺͿͨͼʹωετ͕ਂ͘ͳΔ ͜ΕͰ෼ذ΍ྫ֎ॲཧ͕ೖΔͱࢮʹͦ͏ ͜͏͍͏ͷΛίʔϧόοΫ஍ࠈͱ͍͏
  17. PromiseͰॻ͍ͨ৔߹ processA() .then(function() { return processB(); }).then(function() { return processC();

    }).then(function() { return processD(); }); ωετ͸1ஈ֊ਂ͘ͳΔ͕ɺͦΕҎ্͸ਂ͘ͳΒͳ͍ ίʔϧόοΫ஍ࠈΛ͋Δఔ౓ࠀ෰Ͱ͖͍ͯΔ
  18. ൺֱͯ͠Έ·͠ΐ͏ processA(function() { processB(function() { processC(function() { processD(); }); });

    }); processA() .then(function() { return processB(); }).then(function() { return processC(); }).then(function() { return processD(); }); Promiseͷํ͕෼͔Γ΍͍͢
  19. Ξϩʔؔ਺Λ࢖͏ͱ ΋ͬͱεϚʔτʹͳΔ processA() .then(() => processB()) .then(() => processC()) .then(()

    => processD());
  20. ɹྫ֎ॲཧ΋εϚʔτʹॻ͚Δ processA() .then(() => processB()) .then(() => processC()) .then(() =>

    processD()) .catch(() => { //ྫ֎ॲཧ }) Ͳͷؔ਺Ͱྫ֎͕ग़ͯ΋ɺcatchʹඈΜͰऴྃ͢Δ try-catchΈ͍ͨͳ࢖͍ํ͕Ͱ͖Δ
  21. ΞδΣϯμ ϓϩϩʔά Promiseͱඇಉظॲཧͷઆ໌ Promiseͷجຊతͳ࢖͍ํ Promiseͷಋೖํ๏ ·ͱΊ

  22. Promiseͷಋೖํ๏ ຆͲͷϒϥ΢βͰඪ४૷උͯ͠Δ ϥΠϒϥϦΛΠϯετʔϧ͢Δඞཁ͸ͳ͠ ؔ਺͕PromiseΦϒδΣΫτΛฦ͢Α͏ʹ͢Δ fetch apiͳͲൺֱత৽͍͠΋ͷ͸PromiseΛฦ͢ طଘͷίʔϧόοΫؔ਺ܥͷ΋ͷΛPromiseԽ͢Δ
 ํ๏͸ޙड़

  23. http:/ /caniuse.com/#search=Promise PromiseͷରԠঢ়گ

  24. IEҎ֎͸…… ·͞ʹ ͱ͍͏ঢ়ଶ ͜ΜͳͷͲ͜ʹͰ΋ ͍ΔͩΖ͏

  25. Ͳ͜ʹͰ΋͍Δ ܅ͨͪ΍ͬͺΓPromiseͩ ૉ੖Β͍͠ʂʂ

  26. طଘؔ਺ΛPromiseԽ // ݩͷؔ਺ function processA(cb) { // ͕͔͔࣌ؒΔॲཧ cb(); }

    // PromiseԽ function processAWithPromise() { return Promise((resolve, reject) => { processA(resolve); })); }
  27. طଘؔ਺ΛPromiseԽ // PromiseԽ function processAWithPromise() { return Promise((resolve, reject =>

    { processA(resolve); })); } શମΛPromiseͰׅΔ ݩͷؔ਺ͷίʔϧόοΫʹresolveΛ౉͢
  28. ༨ஊ

  29. কདྷతʹඇಉظॲཧ͸ ΋ͬͱָʹͳΓ·͢ async function main() { await processA(); await processB();

    await processC(); await processD(); } ͍ΘΏΔasyncɺawait
  30. ͨͩ͠asyncɺawaitΛ࢖͏ʹ͸ ؔ਺͕PromiseΛฦ͢͜ͱ͕৚݅Ͱ͢ ܅ͨͪ΍ͬͺΓ ϓϩϛεͩ

  31. ΞδΣϯμ ϓϩϩʔά Promiseͱඇಉظॲཧͷઆ໌ Promiseͷجຊతͳ࢖͍ํ Promiseͷಋೖํ๏ ·ͱΊ

  32. ·ͱΊ PromiseͰඇಉظॲཧΛεϚʔτʹॻ͚Δ Promise͸ຆͲͷϒϥ΢βͰඪ४૷උ asyncɺawaitΛ࢖͏ҝʹ΋PromiseԽ͕ඞཁ

  33. ͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠