いまさら振り返るPromise

Transcript

1. いまさら振り返るPromise N.Shimizu (chikoski@gmail.com)

2. Promise: いずれされる処理を表すオブジェクト https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise 1SPNJTF UIFO GVM'JMMFE UIFO SFKFDUFE
   DBUDI

   SFKFDUFE 1SPNJTF Pending Fulfill Reject Return Return

3. Promise chain GFUDI IUUQTFYBNQMFDPNFOEQPJOUTPNFBDUJPO
   
   
   UIFO SFTQPOTF
   
   SFTQPOTFKTPO
   FSS
   
   OPUJGZ&SSPS FSS
   

   
   
   UIFO EBUB
   
   EBUBMFOHUI
   
   
   
   EBUB
   
   1SPNJTFSFKFDU OP
   EBUB
   
   
   UIFO EBUB
   
   SFOEFS%BUB EBUB
   FSS
   
   OPUJGZ/P%BUB 

4. 処理を始めるところと、結果を利用するところを分けられる EP4PNFUIJOH QBSBN
   SFTQPOTF
   
   \
   
   
   JG SFTQPOTFFSS \
   
   
   
   
   SFUVSO
   IBOEMF&SSPS SFTQPOTFFSS 
   

   
   
   ^
   
   
   EP" 
   
   
   EP# 
   
   
   EP$ 
   
   
   EP% 
   
   
   DPOTVNF SFTQPOTFSFTVMU 
   ^  DPOTU
   Q
   
   EP4PNFUJOH QBSBN 
   EP" 
   EP# 
   EP$ 
   EP% 
   QUIFO DPOTVNF DBUDI IBOEMF&SSPS

5. Promise: 条件分岐の一種 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise 1SPNJTF UIFO GVM'JMMFE UIFO SFKFDUFE
   DBUDI

   SFKFDUFE 1SPNJTF Pending Fulfill Reject Return Return

6. 直列化 UFTU" UIFO UFTU#
   
   
   UIFO TVDDFTT DBUDI GBJM 
   

   <UFTU"
   UFTU#>
   
   
   SFEVDF QSP
   GVOD
   
   QSPUIFO GVOD 
   
   
   UIFO TVDDFTT DBUDI GBJM 
   1SPNJTFBMM <UFTU"
   UFTU# >
   
   
   UIFO TVDDFTT DBUDI GBJM 
   
   㛈ᏁҶ੢⼊ҿӶӔҮ UFTU" UFTU# TVDDFTT GBJM F T T F

7. 並列化 UFTU" DBUDI UFTU#
   
   
   UIFO TVDDFTT DBUDI GBJM 
   

   1SPNJTFSBDF <UFTU"
   UFTU# >
   
   
   UIFO TVDDFTT DBUDI GBJM 
   
   㛈ᏁҶ੢⼊ҿӶӔҮ UFTU" UFTU# TVDDFTT GBJM F T T F

8. エラー処理を本筋と分けて実装できる MFU
   SFTVMU
   
   EP4PNFUIJOH 
   JG SFTVMU
   
   OVMM \
   
   
   SFTVMU
   
   EFGBVMU7BMVF 
   ^
   DPOTVNF

   SFTVMU 
   
   
   EP4PNFUIJOH
   
   
   DBUDI FSS
   
   EFGBVMU7BMVF
   
   
   UIFO DPOTVNF 

9. Promise非対応のPromise対応にするには GVODUJPO
   BEE B
   C \
   
   
   SFUVSO
   B
   
   C
   ^
   GVODUJPO
   QSPNJTFE"EE B

   
   C \
   
   
   SFUVSO
   1SPNJTFSFTPMWF B
   
   C 
   ^
   QSPNJTFE"EE 
    UIFO J
   
   DPOTPMFMPH 
   
    

10. Promise非対応のPromise対応にするには GVODUJPO
    BEE B
    C \
    
    
    JG B
    
    
    ]]
    C
    
     \
    
    
    
    
    UISPX
    OFX
    &SSPS *OWBMJE
    QBSBNFUFS

    
    
    
    ^
    
    
    SFUVSO
    B
    
    C
    ^
    GVODUJPO
    QSPNJTFE"EE B
    C \
    
    
    USZ\SFUVSO
    1SPNJTFSFTPMWF BEE B
    C ^
    
    
    DBUDI
    FSS
    \
    SFUVSO
    1SPNJTFSFKFDU FSS ^
    ^

11. Promise非対応のPromise対応にするには DPOTU
    GT
    
    SFRVJSF GT 
    GVODUJPO
    SFBE GJMF \
    
    
    SFUVSO
    OFX
    1SPNJTF SFTPMWF
    SFKFDU

    
    
    \
    
    
    
    
    GTSFBE'JMF GJMF
    FSS
    EBUB
    
    \
    
    
    
    
    
    
    FSS
    
    SFTPMWF FSS
    
    SFKFDU EBUB 
    
    
    
    
    ^
    
    
    ^
    ^
    
    
    
    
    

12. Promise非対応のPromise対応にするには GVODUJPO
    BEE0OF OVNCFST \
    
    
    DPOTU
    SFTVMU
    
    <>
    
    
    GPS DPOTU
    OVN
    PG
    OVNCFST \
    
    
    
    
    SFTVMUQVTI OVN
    

    
     
    
    
    ^
    ^
    GVODUJPO
    QSPNJTFE"EE0OF OVNCFST \
    
    
    SFUVSO
    1SPNJTFBMM OVNCFSTNBQ J
    
    1SPNJTFSFTPMWF J
    
     
    ^

13. Anti-pattern: ネストしたPromise EP" UIFO SFTVMU"
    
    \
    
    
    EP# UIFO SFTVMU#
    
    DPOTVNF SFTVMU"
    SFTTVMU#

    
    ^ 
    1SPNJTFBMM <EP"
    EP# >
    
    
    UIFO SFTVMUT
    
    DPOTVNF SFTVMUT<>
    SFTVMU<>  http://taoofcode.net/promise-anti-patterns/

14. Anti-pattern: 続かないチェーン GVODUJPO
    EP4PNFUIJOH \
    
    
    DPOTU
    QSPNJTF
    
    EP" 
    
    
    QSPNJTFUIFO SFTVMU
    
    DPOTVNF SFTVMU 
    

    
    
    SFUVSO
    QSPNJTF
    ^
    GVODUJPO
    EP4PNFUIJOH \
    
    
    SFUVSO
    EP" UIFO SFTVMU
    
    DPOTVNF SFTVMU 
    ^ http://taoofcode.net/promise-anti-patterns/