作って理解するPromise / Let's try implementing Promise

プロによる本気の攻略本『JavaScript/TypeScript実力強化書』 - FL#115

https://forkwell.connpass.com/event/375550/

Transcript

1. 作って理解する Promise 小田島 太郎 / @shimataro999 プロによる本気の攻略本『 JavaScript/TypeScript実力強化書』 - FL#115 https://forkwell.connpass.com/event/375550/
2. 自己紹介 🪪小田島 太郎 / 𝕏 @shimataro999 🏢さくらインターネット所属 🧠AI系サービスの開発マネージャー 🃏副業で手品やってます 󰏦11/16 JSConf JP TrackC司会やってました
3. この発表について 対象者 非同期処理を使った プログラミング経験あり Promiseを深く理解したい Promiseの基本的な使い方や メリットを理解している
4. この発表について 今回お話しする内容 Promise解剖 どういう仕組み？ 実際に作ってみる ⭕コンストラクター / then() / race()
 ❌catch() / finally() / all() / ...
5. Yakusokuクラスを作ります！
6. 全体のソースコードはこちら Yakusokuのソースコード https://github.com/shimataro/yakusoku 資料も後で公開します！
7. 事前知識
8. 用語 内部状態 履行 / fulfilled 非同期処理が成功した 拒否 / rejected 非同期処理が失敗した 待機 / pending まだ非同期処理が終わっていない （成功も失敗もしていない） 初期状態
9. 用語 内部状態に関するもの 解決 / resolved ≒履行（fulfilled） 厳密には違う 決定 / settled 非同期処理が履行または拒否された
10. 状態について 内部状態 履行 / fulfilled 非同期処理が成功した 拒否 / rejected 非同期処理が失敗した 待機 / pending まだ非同期処理が終わっていない （成功も失敗もしていない） 一度決定したら それ以降は変わらない
11. ここまでの実装
12. 用語 その他 Identity関数 / 恒等関数 入力値をそのまま返す関数 Thrower関数 入力値を例外としてスローする関数 Thenable then()メソッドがあるクラスやオブジェクト（ Thenable ⊃ Promise） awaitはThenableなオブジェクト全般 に対して適用できる
13. ヘルパー関数 Identity関数 / Thrower関数 Thenableかどうか判定 Thenableならそのまま返す そうでなければThenableにする
14. コンストラクター
15. Promiseの使い方おさらい 引数として、関数を1つ受け取る 関数は、引数として関数を2つ受け取る 非同期処理が履行された時に呼ぶ関数 非同期処理が拒否された時に呼ぶ関数
16. コンストラクターに追加！ すでに決定されていたら何もしない executor() 内部で例外が発生した場合の処理
17. then() の実装
18. then() おさらい 関数引数を2つ受け取る 非同期処理が履行されたら1番目の関数（onFulfilled）をコール 非同期処理が拒否されたら2番目の関数（onRejected）をコール Promiseチェーン 呼び出した関数の戻り値（または関数から発生した例外） を元にしたPromiseオブジェクトを返す
19. Promiseチェーン promiseFunction()
 .then(foo , undefined)
 .then(bar , undefined)
 .then(undefined, baz)
 .then(qux , undefined);
 fooが履行された時の流れ fooが拒否された時の流れ catch(baz)と同じ
20. こう！ promiseFunction()
 .then(foo , thrower)
 .then(bar , thrower)
 .then(identity , baz)
 .then(qux , thrower);
 fooが履行された時の流れ fooが拒否された時の流れ
21. とりあえずこんな感じか・・・？ 引数省略時はそれぞれ Identity関数とThrower関数 履行時と拒否時に 渡された引数をコール
22. とりあえずこんな感じか・・・？ ❌then()コール時点で待機状態だと 何も行わずに終了してしまう ❌Promise（Yakusoku）チェーンが できない
23. 待機状態だった時の処理 then()コール時の引数を保持しておく
24. 待機状態だった時の処理 決定されたら保持した関数をコール
25. Yakusokuチェーン（ちょっとややこしい！） 待機なら新しいYakusokuオブジェクトを作成 resolve, rejectも保持対象 履行/拒否なら値をThenableにして返す 例外発生時は拒否状態のYakusokuを返す
26. Yakusokuチェーン（ちょっとややこしい！） 保持したresolve()やreject()をコールするよう変更 戻り値がThenableかどうか、例外が発生したかなどを考慮 reject側もほぼ同様なので省略
27. race()の実装
28. race()の仕様 複数のYakusokuオブジェクトのうち 最初に決定されたものを戻り値とする
29. race()の実装 最初に決定されたものが採用される！
30. まとめ
31. 話したこと Promiseを実装 コンストラクター / then() / race()
 この先はキミの目で確かめてくれ！ 3つの状態 待機 / 履行 / 拒否 一度決定されたら変わらない