Hamamatsu.js #3 Promise入門

Hamamatsu.js #3にて発表したPromiseに関する資料です。
https://connpass.com/event/85858/presentation/

Transcript

1. modern async in JavaScript 2018.5.19 yuto ogi Hamamatsu.js #3
2. i am… yuto ogi / @jacoyutorius Ruby / Rails JavaScript / Vue.js / Nuxt.js AWS
3. contents •modern async in Javascript •promise (ES6) •async/await (ES7)
4. purpose •promiseΦϒδΣΫτͷ࢖͍ํΛཧղ͢Δ •callbackʹΑΔඇಉظॲཧͱͷൺֱ •promiseΦϒδΣΫτͷ࡞Γํ •Promise.all •Promise.race
5. playground in browser •RunKit (https://runkit.com/home/) •CodePen (https://codepen.io/) •Paiza (https://paiza.io/ja)
6. Promise is what? •ඇಉظॲཧΛந৅Խͨ͠ΦϒδΣΫτ •ΠϯλʔϑΣʔε͕౷Ұ͞ΕΔ •promise().then().catch(); •੒ޭ࣌͸resolveɺࣦഊ࣌͸reject ΛͦΕͧΕݺͿ •PromiseΦϒδΣΫτͷ࡞੒ •var promise = new Promise(function(resolve, reject){ });
7. callback is troublesome •ωετ͕ਂ͘ͳΓ͕ͪ •Τϥʔ࣌ͷॲཧͷॻ͖ํ͕౷Ұ ͞Εͳ͍
8. callback Result => “hi!ABC” https://runkit.com/jacoyutorius/callback-is-troublesome A, B, C ͷ֤ϝιουͷॲཧॱΛ୲อ͢ΔͨΊίʔϧ όοΫΛ࢖͏͕ɺωετ͕ਂ·ͬͯ͠·͏ɻ Ex.1
9. promise Result => “hi!pApBpC” https://runkit.com/jacoyutorius/callback-is-troublesome Promise.then() ͰϝιουνΣΠϯ͢Δ͜ͱͰɺඇ ಉظॲཧͷॲཧॱΛ୲อ͢Δ͜ͱ͕Ͱ͖Δɻ pA, pB, pC ϝιουʹͯͦΕͧΕpromiseΦϒδΣ ΫτΛฦ͢ඞཁ͕͋Δɻ Ex.1
10. Ex.2 API call by callback https://runkit.com/jacoyutorius/promise-call-api-sample-2 
    (JUIVCͷ"1*ΑΓɺਓؾϨϙδτϦͷҰཡΛऔಘ
    
    ͷϦετͷ൪໨ͷϨίʔυ 
    ࠷΋ਓؾͷ͋ΔϨϙδτϦ
    ͷzDPOUSJCVUPST@VSMz
    ΑΓίϯτϦϏϡʔλͷҰཡΛऔಘ
    
    ͷ݁ՌΑΓɺίϯτϦϏϡʔλͷαϜωΠϧΛ
    JNHλάͰׅͬͨ഑ྻΛ࡞੒
11. Ex.2 API call by promise https://runkit.com/jacoyutorius/promise-call-api-sample-2
12. •new Promise(fn) ͷ໭Γ஋͕promiseΦϒδΣΫτ •fnʹ͸ඇಉظॲཧ౳Λॻ͘ •fn͸resolveͱrejectͷ2ͭͷҾ਺ΛͱΔ •fn(resolve, reject) •ॲཧ݁Ռ͕ਖ਼ৗͰ͋Ε͹resolveɺΤϥʔͰ͋Ε͹rejectΛݺͿ creating new Promise
13. creating new Promise Result => {user: “yuto”} https://runkit.com/jacoyutorius/creating-new-promise new Promiseʹ౉͢callbackʹඇಉظॲཧΛ࣮૷͢Δɻ ॲཧͷ࠷ظͰresolve͔rejectͷ͍ͣΕ͔ΛݺͿɻ promiseΦϒδΣΫτͷॲཧ݁Ռ͸.thenͰड͚औΔɻ
14. creating new Promise Result => “error!” https://runkit.com/jacoyutorius/creating-new-promise .then(onFulfilled, onRejected) onFulfilled͸resolve͕ݺ͹Εͨࡍͷ໭Γ஋Λड͚औΔɻ onRejected͸reject͕ݺ͹Εͨࡍͷ݁ՌΛड͚औΔɻ
15. creating new Promise Result => “error!” https://runkit.com/jacoyutorius/creating-new-promise .catch() ͸reject͕ݺ͹Εͨࡍͷ݁ՌΛड͚෇͚Δϝιουɻ Promise.catch(“ࣦഊ࣌ͷίʔϧόοΫ”) = Promise.then(undefined, “ࣦഊ࣌ͷίʔϧόοΫ”)
16. method chain (promise chain) Result => 1 => 3 => 5 https://runkit.com/jacoyutorius/promise-method-chain
17. error handling Result => 1 => “Error!” https://runkit.com/jacoyutorius/promise-method-chain
18. Promise.all •Promise.all() ʹPromiseΦϒδΣΫτͷ഑ྻΛ౉͢ •౉ͨ͠promiseΦϒδΣΫτ͕શͯ׬ྃ͢Δͱɺ.then() ʹPromiseΦϒδΣ ΫτͷฦΓ஋͕഑ྻͰฦͬͯ͘Δ
19. Promise.all Result => [1, 2] https://runkit.com/jacoyutorius/promise-all
20. Promise.race •Promise.race() ʹPromiseΦϒδΣΫτͷ഑ྻΛ౉͢ •౉ͨ͠promiseΦϒδΣΫτͷ͏͍ͪͣΕ͔͕׬ྃ͢Δͱɺ.then() ʹ׬ྃ ͨ͠PromiseΦϒδΣΫτͷฦΓ஋͕ฦͬͯ͘Δ •ଞͷpromiseΦϒδΣΫτ΋Ωϟϯηϧ͞ΕΔΘ͚Ͱ͸ͳ͘ɺ࣮ߦ͞ΕΔ • promiseʹ͸Ωϟϯηϧͱ͍͏֓೦͸ͳ͍ •λΠϜΞ΢τॲཧΛ࣮૷͢Δࡍʹ࢖͏ͱྑ͍Β͍͠
21. Promise.race Result => 2 https://runkit.com/jacoyutorius/promise-all
22. end •PromiseͰҰ൪େ͖͍ͷ͸ඇಉظॲཧͷॻ͖ํ͕౷Ұ͞ΕΔ͜ͱ •ͱ͸͍͑ɺۙ೥ͷjsϑϨʔϜϫʔΫ΍npmύοέʔδͰ͸໭Γ஋͕PromiseΦϒδΣΫτ ͷ΋ͷ͕΄ͱΜͲͳͷͰԡ͓͖͍͑ͯͨ͞ •promiseͷଞʹ΋࠷ۙΑ͘ݟ͔͚Δ͜ΕΒˣͷػೳ •async/await •Arrow function •΋ԡ͓͖͍͑ͯͨ͞ɻશ͘ະ஌ͷػೳͱ͍͏Θ͚Ͱ͸ͳ͍ͷͰ࠷ॳ͸ྲྀ͢ఔ౓Ͱ͍͍͔΋
23. docs. •JavaScript MDN (https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/ Using_promises) •JavaScript Promiseͷຊ (http://azu.github.io/promises-book/)