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

JavaScript Promise API in 2019

Araya
June 06, 2019

JavaScript Promise API in 2019

Araya

June 06, 2019
Tweet

More Decks by Araya

Other Decks in Programming

Transcript

  1. Promiseͷ෮शͱ༧श
    あらや @arayaryoma
    2019-06-06 Meguro.es # 21 @ ビザスク
    たぶん初心者向け

    View full-size slide

  2. 自己紹介
    あらや / 阿部 凌磨
    @arayaryoma
    @arayaryoma
    https://araya.dev
    Web developer at 株式会社ヘマタイト
    JavaScript/TypeScript/Go/Kotlin
    Angular/React/ReactNative/Next.js/Nest.js

    View full-size slide

  3. Promise API
    Promise.all
    Promise.race
    Promise.reject
    Promise.resolve
    Promise.any
    Promise.allSettled
    Promise.try
    Promise.prototype.catch
    Promise.prototype.then
    Promise.prototype.finally

    View full-size slide

  4. Promise.resolve(value)
    引数で渡された値で解決されたPromiseオブジェクトを返す

    View full-size slide

  5. Promise.reject(reason)
    引数で渡された理由(reason)でリジェクトされたPromiseオブジェクトを返す

    View full-size slide

  6. Promise.prototype.then(onResolved, onRejected)
    第1引数に、Promiseが解決されたとき、第2引数にリジェクトされたときに呼ばれる
    コールバック関数を受け取る。
    Promiseを返す。

    View full-size slide

  7. Promise.prototype.catch(onRejected)
    Promiseがリジェクトされたときに呼ばれるコールバック関数を引数で受け取る。
    Promiseを返す。
    .then(undefined, onRejected)と等価。

    View full-size slide

  8. Promise.prototype.catch(onRejected)
    Promiseがリジェクトされたときに呼ばれるコールバック関数を引数で受け取る。
    Promiseを返す。
    .then(undefined, onRejected)と等価。
    then͔Βcatch΁νΣΠϯͰ͖Δ

    View full-size slide

  9. Promise.all([…promises])
    引数で渡されたイテレータブルなオブジェクトの中のすべてのPromiseが解決されたら
    解決された単一のPromiseを返す。

    View full-size slide

  10. Promise.all([…promises])
    どれか1つでもリジェクトされたら、
    そのreject reasonを持ってリジェクトされる。

    View full-size slide

  11. Promise.race([…promises])
    Promiseのイテレータブルなオブジェクトを受け取る。
    受け取ったPromiseのうち、
    どれか1つでも解決もしくはリジェクトされたら
    その状態のPromiseを返す。

    View full-size slide

  12. Promise.prototype.finally(callback)
    解決されたかリジェクトされたかにかかわらず、Promiseが確立されたら、
    引数で受け取ったコールバック関数が実行される。
    Stage4

    View full-size slide

  13. Promise.prototype.finally(callback)
    確立されたらとりあえずなにか処理をして、それからthenとcatchを処理したい。
    Stage4
    finally͸ղܾ΋͘͠͸ϦδΣΫτ͞Εͨ஋Λ࣋ͬͨPromiseΛฦ͢

    View full-size slide

  14. Promise.allSettled([…promises])
    Stage3
    allと同じく、Promiseのイテレータブルなオブジェクトを受け取る。
    すべてのPromiseが解決もしくはリジェクトされるのを待ち、結果を持ったPromiseの配列を返す。

    View full-size slide

  15. Promise.any([…promises])
    Stage1
    Promiseのイテレータブルなオブジェクトを受け取る。
    受け取ったPromiseのうち、どれか1つでも解決されたら
    その解決された値をPromiseとして返す。
    すべてのPromiseがリジェクトされたら
    リジェクト理由の配列を返す。

    View full-size slide

  16. Promise.any([…promises])
    Stage1
    Promiseのイテレータブルなオブジェクトを受け取る。
    受け取ったPromiseのうち、どれか1つでも解決されたら
    その解決された値をPromiseとして返す。
    すべてのPromiseがリジェクトされたら
    リジェクト理由の配列を返す。

    View full-size slide

  17. Promise.try(func)
    Stage1
    引数で受け取ったfuncが同期的に例外を吐いてもPromiseがリジェクトされたものとして扱える。
    bluebirdから輸入(?) 最終更新は3年前・・・

    View full-size slide

  18. Promise.try(func)
    Stage1

    View full-size slide

  19. Promise.try(func)
    Stage1

    View full-size slide

  20. ·ͱΊ
    PromiseのAPIはresolve, reject, then, catch以外にも、
    知っていると便利なものがいくつかあります。
    これを踏まえてPromiseで非同期処理を書いているコードを見直すと
    きれいにまとめられる箇所が見つかるかもしれません。
    tryに関しては使えるようになるかかなり怪しい・・・

    View full-size slide