Promiseを実装してみよう

Transcript

1. Promise Λ࣮૷ͯ͠ΈΑ͏ Hiroki Kumamoto a.k.a @kumabook We Are JavaScripters! @26th
2. ͸͡Ίʹ • We Are JavaScripters! 2प೥͓ΊͰͱ͏͟͝ ͍·͢ʂ • About me: • Twitter, GitHub: @kumabook • 3ճ໨ͷൃද
3. Promiseͱ͸ • ඇಉظΛ͍͍ײ͡Ͱ͔͚Δ΍ͭ • MDNͷղઆ • ࡞੒࣌఺Ͱ͸ʢ݁Ռ͕)෼͔Βͳͯ͘΋Α͍஋΁ͷϓϩΩ γ • ੒ޭ΍ࣦഊʹର͢ΔϋϯυϥʔΛؔ࿈෇͚Δ͜ͱ͕Ͱ͖ Δ • ಉظϝιουͱಉ͡Α͏ʹ஋Λฦ͢͜ͱ͕Ͱ͖Δ
4. ྫ: BKBY \
   
   
   VSM
   VSM
   
   
   TVDDFTT
   
   
   \
   BMFSU lTVDDFTTz
   ^
   
   
   FSSPS
   
   
   \
   BMFSU lFSSPSz
   ^
   ^  WBS
   QSPNJTF
   
   BKBY \
   VSM
   VSM
   ^ 
   QSPNJTFUIFO
   
   \
   BMFSU lTVDDFTTz
   ^
   
   
   
   
   
   
   
   
   
   
   
   
   DBUDI
   
   \
   BMFSU lFSSPSz
   ^ 
5. • Promise.prototype.then(), Promise.prototype.catch()΋PromiseΛฦ͢ͷ ͰɺνΣʔϯʢ࿈࠯ʣͰ͖Δ PromiseͷϝϦοτ BKBY \
   VSM
   VSM
   ^
   
   
   UIFO EBUB
   
   BKBY \
   VSM
   VSM
   ʜ
   ^
   
   
   UIFO EBUB
   
   BKBY \
   VSM
   VSM
   ʜ
   ^
   
   
   DBUDI
   
   \
   BMFSU lFSSPSz
   ^ 
6. PromiseΛ࣮૷ͯ͠ΈΑ͏ • લ৬Ͱ૊ΈࠐΈϒϥ΢β޲͚(es3)ʹ࣮૷ • es3ͳه๏Ͱ࣮૷ • catch͕༧໿ޠͳͷΛճආͳͲ • kumabook/yakusoku (174ߦ: 4KB) • jQuery.Deferred(Promiseͷલ਎)͕ಋೖ͞Εͨͷ͕ jQuery 1.5 (2011/1/31) • ࠓ΍ඪ४APIʹͳͬͯ࢖͑ͯ౰ͨΓલ • ͳΜͱͳ͘࢖͑ͯཧղͨ͠ؾʹͳ͍͕ͬͯͨࣗ෼Ͱ࣮૷ͯ͠ษڧʹͳͬͨ
7. ࠓ೔঺հ͢ΔAPIͷ࣮૷ • new Promise() • PromiseΦϒδΣΫτͷ࡞੒ • $.ajaxͳͲ͕಺෦తʹ࢖͍ͬͯΔ΋ͷ • Promise.prototype.then() • ੒ޭɾࣦഊ࣌ͷϋϯυϥʔΛඥ͚ͮΔ
8. PromiseΦϒδΣΫτͷੜ੒ • executor • resolveͱrejectΛҾ਺ʹͱΔ • resolve͔rejectͷͲͪΒ͔ҰํΛݺͼग़͢ • ੒ޭͨ͠Βresolveɻࣦഊͨ͠Βreject • ͙͢ʹ࣮ߦ͞ΕΔ WBS
   QSPNJTF
   
   OFX
   1SPNJTF SFTPMWF
   SFKFDU
   
   \
   
   
   TFU5JNFPVU
   
   \
   SFTPMWF GPP 
   ^
    
   ^ 
9. Promiseͷ࣮ߦঢ়ଶ • Promise ͷঢ়ଶ (pending, fulfilled, rejected) • fulfilled ΋͘͠͸rejectedʹͳͬͨঢ়ଶΛsettledͱ΋͍͏ QFOEJOH GVMpMMFE SFKFDUFE
10. Promiseͷঢ়ଶભҠ QFOEJOH GVMpMMFE SFKFDUFE 3VO
    FYFDVUPS SFTPMWF SFKFDU
    PS

    UISPX
    FSSPS $BMM
    TVDDFTT
    IBOEMFS $BMM
    FSSPS
    IBOEMFS QSPNJTFͷঢ়ଶ QSPNJTFͷಈ࡞ FYFDVUPSͷಈ࡞
11. PromiseΛ࣮૷ͯ͠ΈΑ͏ • PromiseͷϓϩύςΟ • status: ঢ়ଶ(pending, fulfilled, rejected) • value: ੒ޭͨ࣌͠ͷ݁Ռɻ΋͘͠͸ࣦഊͨ͠ཧ ༝ • handlers: ੒ޭͨ࣌͠ɺࣦഊͨ࣌͠ͷؔ਺ͷϖΞ ΛΩϡʔ(഑ྻ)Ͱอ࣋
12. PromiseͷίϯετϥΫλ • ϓϩύςΟͷॳظԽ • Ҿ਺Ͱ౉͖ͬͯͨexecutorΛ࣮ߦ
13. PromiseͷίϯετϥΫλ
 ϓϩύςΟͷॳظԽ WBS
    1SPNJTF
    
    GVODUJPO FYFDVUPS
    \
    
    
    UIJTTUBUVT
    
    
    
    4UBUVT1&/%*/(
    
    
    UIJTWBMVF
    
    
    
    
    OVMM
    
    
    UIJTIBOEMFST
    
    <>
    
    
    UIJTSVO FYFDVUPS 
    ^
14. Ҿ਺Ͱ౉͖ͬͯͨexecutorΛ࣮ߦ 1SPNJTFQSPUPUZQFSVO
    
    GVODUJPO FYFDVUPS
    \
    
    
    WBS
    TFMG
    
    UIJT
    
    
    USZ
    \
    
    
    
    
    FYFDVUPS GVODUJPO WBMVF
    \
    
    
    
    
    
    
    TFMGGVMpMM WBMVF 
    
    
    
    
    ^
    GVODUJPO F
    \
    
    
    
    
    
    
    TFMGSFKFDU F 
    
    
    
    
    ^ 
    
    
    ^
    DBUDI
    F
    \
    
    
    
    
    TFMGSFKFDU F 
    
    
    ^
    ^ FYDFDVUPSࣗମ͕Τϥʔʹͳͬ ͨΒΩϟονͯ͠ΤϥʔΦϒδΣΫτͱ ͱ΋ʹϋϯυϥʔ΁ FYDFDVUPS͕SFTPMWFͱ SFKFDUΛݺΜͰ͘ΕΔͷͰͦͷ݁Ռ Λϋϯυϥʔ΁
15. Promiseͷ࣮ߦঢ়ଶ QFOEJOH GVMpMMFE SFKFDUFE 3VO
    FYFDVUPS SFTPMWF SFKFDU
    PS

    UISPX
    FSSPS $BMM
    TVDDFTT
    IBOEMFST $BMM
    FSSPS
    IBOEMFST TFMGGVMpMM TFMGSFKFDU
16. fulfillͱreject 1SPNJTFQSPUPUZQFGVMpMM
    
    GVODUJPO WBMVF
    \
    
    
    WBS
    TFMG
    
    
    
    
    UIJT
    
    
    UIJTTUBUVT
    
    4UBUVT'6-'*--&%
    
    
    UIJTWBMVF
    
    
    WBMVF
    
    
    UIJTIBOEMFSTGPS&BDI GVODUJPO IBOEMFS
    \
    
    
    
    
    IBOEMFSPO'VMpMMFE TFMGWBMVF 
    
    
    ^ 
    
    
    UIJTIBOEMFST
    
    <>
    ^
    ऴྃͨ͠QSPNJTFʹରͯ͠ UIFO͕ݺ͹ΕΔͷͰ
17. Promise.prototype.then() • ϋϯυϥͷϖΞΛొ࿥ͭͭ͠ɺ৽͍͠PromiseΛฦ ͢ • ̎ͭϙΠϯτ͕͋Δ • ͢Ͱʹsettled(׬ྃࡁΈ)͔Ͳ͏͔ • Promise͕PromiseΦϒδΣΫτ(thenable)Ͱ resolve͢Δ͔ʁ
18. Promise.prototype.then() • ͢Ͱʹsettled(׬ྃࡁΈ)͔Ͳ͏͔ • fulfilled or rejectedͳΒͦͷ··ϋϯυϥʔ ΛݺͿ • pendingͳΒexecutorͷ࣮ߦޙʹݺͿ • queue(this.handlers)ʹੵΉ
19. Promiseͷ࣮ߦঢ়ଶ QFOEJOH 3VO
    FYFDVUPS SFTPMWF SFKFDU
    PS

    UISPX
    FSSPS ͜ͷؒʹUIFO ͜͜Ҏ߱ʹUIFO
20. Promise.prototype.then() • Promise͕PromiseΦϒδΣΫτ(thenable)Ͱresolve͢ Δ͔ʁ • ΋͠Promiseͷ݁Ռ͕PromiseΦϒδΣΫτͩͬͨ৔߹ ͸ɺ͞ΒʹͦͷPromiseΦϒδΣΫτΛղܾͨ݁͠ՌΛ ࠾༻͢Δ • mapͱflatMap͕ϛοΫε͞Εͨڍಈ • ಈతܕ෇͚ݴޠಛ༗ͳ࢓༷
21. BKBY \
    VSM
    HFU6TFS6SM
    ^
    
    
    UIFO EBUB
    
    \
    
    
    
    
    
    JG
    EBUBJT"ENJO
    \
    
    
    
    
    
    
    
    
    SFUVSO
    BKBY \
    VSM
    HFU%BUB6SM
    ^ 
    
    
    
    
    
    ^
    
    
    
    
    
    SFUVSO
    <>
    
    
    ^ UIFO EBUB
    
    VQEBUF7JFX EBUB
    
    
    DBUDI
    
    \
    BMFSU lFSSPSz
    ^  QSPNJTFͱඇQSPNJTFͳ஋ Λಁաతʹѻ͑Δ
22. 1SPNJTFQSPUPUZQFUIFO
    
    GVODUJPO PO'VMpMMFE
    PO3FKFDUFE
    \
    
    
    WBS
    TFMG
    
    UIJT
    
    
    SFUVSO
    OFX
    1SPNJTF GVODUJPO SFTPMWF
    SFKFDU
    \
    
    
    
    
    
    
    TFMGFORVFVF0S&YFDVUF)BOEMFS GVODUJPO WBMVF
    \
    
    
    
    
    
    
    
    
    JG
    WBMVF
    JOTUBODFPG
    1SPNJTF
    \
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    SFTPMWF WBMVFUIFO PO'VMpMMFE
    PO3FKFDUFE 
    
    
    
    
    
    
    
    
    ^
    FMTF
    \
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    SFTPMWF PO'VMpMMFE WBMVF 
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    ^
    GVODUJPO F
    \
    
    
    
    
    
    
    
    
    
    ʜ
    
    
    
    
    
    ^ 
    
    
    ^ 
    ^ ී௨ͷ஋ͷ৔߹ UIFOBCMFͷ஋ͷ৔߹
23. Promise API • ࠓճ͸঺հͨ͠API • new Promise() • Promise.prototype.then() • ࢒Γ • Promise.prototype.catch() • Promise.resolve(), Promise.reject() • Promise.all(), Promise.race()
24. ·ͱΊ • PromiseΛ࣮૷Λ঺հ • new Promise()ͱPromise.prototype.then() • ࣮૷͸γϯϓϧͱࢥ͍͖΍ͦͦ͜͜ෳࡶ • Stateful + asyncͳͷͰɺςετɾσόοάͣ͠Β͍ • Կؾͳ͘࢖͍ͬͯΔAPIͷΛ༗Γ೉ΈΛײ͡ΒΕ·͢
25. Thank you
26. ࢀߟࢿྉ • Promise - JavaScript | MDN • PromiseΛ࢖͏ - JavaScript | MDN • Promises/A+ • kumabook/yakusoku