Promise完全攻略

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. ͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠