Promise と async/await

Transcript

1. Promise と async/await Javascript 非同期処理完全理解（2）
2. アイスブレイクでまずみなさんに質問をします
3. この２つのコードで型が違う理由ご存知ですか？ （知ってる人はネタバレ禁止です笑）
4. わからなくても大丈夫
5. この勉強会で完全理解できる！
6. 職業 自己紹介 韓国人です。大学時代にはげしくアニメ オタクをやってて日本語が上手くなりま した。 フロントエンドエンジニア（2020/11 ~） React、Typescript メインでやってます
7. CONTENTS 1. Callback 関数の限界 2. Promise 3. async/await 4. まとめ
8. 1. Callback 関数の限界
9. let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) Q. console.log には何が出力されるでしょうか？
10. console.log は setTimeout の内部処理がわからない let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) Q. console.log には何が出力されるでしょうか？ 正解：０
11. Memory Heap Call Stack Web APIs Task Queue Event Loop let g = 0; （されて CallStack から消える） ①実行 let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) ①実行 なぜわからないのか
12. Memory Heap Call Stack Web APIs Task Queue Event Loop setTimeout(() => { g = 100 }, 0) let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) なぜわからないのか ②実行 ②実行
13. Memory Heap Call Stack Web APIs Task Queue Event Loop setTimeout(() => { g = 100 }, 0) let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) なぜわからないのか ②実行 setTimeout(() => { g = 100 }, 0) こっちに移動する
14. Memory Heap Call Stack Web APIs Task Queue Event Loop let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) なぜわからないのか ②実行 setTimeout(() => { g = 100 }, 0) setTimeout が実行されたとみなされ、 Call Stack からは消える
15. Memory Heap Call Stack Web APIs Task Queue Event Loop let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) なぜわからないのか () => { g = 100 } コールバック関数を Task Queue に送る
16. Memory Heap Call Stack Web APIs Task Queue Event Loop let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) なぜわからないのか console.log(g) ③実行 (この時点の g の値は 0) ③実行 () => { g = 100 } （されて CallStack から消える）
17. Memory Heap Call Stack Web APIs Task Queue Event Loop let g = 0; setTimeout(() => { g = 100 }, 0) console.log(g) なぜわからないのか () => { g = 100 } ④実行 ④実行 非同期処理のコールバック関数は 同期処理が終わった後に実行される
18. 非同期処理結果に対する後続処理は、コールバック関数で行う必要がある let g = 0; setTimeout(() => { g = 100; console.log(g); // 100 }, 0)
19. でもコールバック関数だけでは限界があり、、
20. const get = (url, callback) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) callback(JSON.parse(xhr.response)); else console.error(xhr.statusText); }; }; 1. Callback Hell による可読性の低下 データを取得する非同期関数を作ってみよう
21. get('なにかのurl', (a) => { console.log(a) }) 使うときは url と callback 関数を渡す
22. ネストし始めたら地獄 (Callback Hell) a の結果で b を GET して、その結果でまたｃをGETして、その結果でまた（以下略） get(‘/step1’, (a) => { get(`/step2/${a}`, (b) => { get(`/step3/${b}`, (c) => { get(`/step4/${c}`, (d) => { console.log(c) }) }) }) })
23. Image From wikipedia https://www.linkedin.com/pulse/callback-hell-javascript-abir-tasrif-anto/ 可読性が落ちてミスが多発する
24. 2. エラー処理が難しい try { throw new Error("Error!"); } catch (error) { console.error("エラー", error) } try-catch エラーを発生させてみよう
25. try { throw new Error("Error!"); } catch (error) { console.error("エラー", error) } try-catch エラーを発生させてみよう エラーをキャッチしてる 2. エラー処理が難しい
26. try { setTimeout(() => { throw new Error("Error!") }, 0) } catch (error) { console.error("エラー", error) } try-catch エラーを発生させてみよう 2. エラー処理が難しい
27. try { setTimeout(() => { throw new Error("Error!") }, 0) } catch (error) { console.error("エラー", error) } try-catch エラーを発生させてみよう エラーがキャッチできない 2. エラー処理が難しい
28. Memory Heap Call Stack Web APIs Task Queue Event Loop try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } なぜエラーがキャッチできないのか try-catch ブロックが コールスタックに入る
29. Memory Heap Call Stack Web APIs Task Queue Event Loop try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } なぜエラーがキャッチできないのか setTimeout(() => { 　throw new Error("Error!") }, 0) setTimeout は こっちに移動する
30. Memory Heap Call Stack Web APIs Task Queue Event Loop try { } catch (error) { console.error("エラー", error) } try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } なぜエラーがキャッチできないのか setTimeout(() => { 　throw new Error("Error!") }, 0) setTimeout が実行されたとみなされ、 Call Stack からは消える
31. Memory Heap Call Stack Web APIs Task Queue Event Loop try { } catch (error) { console.error("エラー", error) } try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } なぜエラーがキャッチできないのか () => { 　throw new Error("Error!") } コールバック関数を Task Queue に移動、 コールスタックが空になるのを待つ
32. Memory Heap Call Stack Web APIs Task Queue Event Loop try { } catch (error) { console.error("エラー", error) } try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } なぜエラーがキャッチできないのか 同期処理である try–catch ブロックの 残り処理が実行される。この時点では エラーがないので、正常終了する () => { 　throw new Error("Error!") }
33. Memory Heap Call Stack Web APIs Task Queue Event Loop try { setTimeout(() => { 　　throw new Error("Error!") 　}, 0) } catch (error) { console.error("エラー", error) } なぜエラーがキャッチできないのか キューで待ってたコールバック関数が エラーを発生してるが、もう try-catch ブロックは終了した後なの でエラーキャッチができない () => { 　throw new Error("Error!") }
34. この限界を克服するために登場したものが、、
35. 3. Promise
36. Promise とは - ES6(2015年)で投入された、非同期処理の状態や結果を表現するビルトインオブジェクト - 非同期作業をより簡単に処理できる
37. Promise とは - ES6(2015年)で投入された、非同期処理の状態や結果を表現するビルトインオブジェクト - 非同期作業をより簡単に処理できる
38. 非同期処理の状態 pending fulfilled rejected 非同期処理がまだ行われてない状態 非同期処理が完了した状態（成功） 非同期処理が完了した状態（失敗） 非同期処理には3つの状態が存在する
39. 非同期処理の状態 pending fulfilled rejected 非同期処理がまだ行われてない状態 非同期処理が完了した状態（成功） 非同期処理が完了した状態（失敗） 非同期処理には3つの状態が存在する settled (pending ではない状態)
40. 補足) settled になったら状態は変化しない const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(); // すでにresolveされているため無視される reject(new Error("エラー")); }, 16); }); promise.then(() => { console.log("Fulfilledとなった"); }, (error) => { // この行は呼び出されない }); 一度でも Settled となった Promise インスタンスは、それ以降別の状態には変化しない
41. 補足) settled になったら状態は変化しない const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(); // すでにresolveされているため無視される reject(new Error("エラー")); }, 16); }); promise.then(() => { console.log("Fulfilledとなった"); }, (error) => { // この行は呼び出されない }); 一度でも Settled となった Promise インスタンスは、それ以降別の状態には変化しない 実際実行してみた
42. Promise インスタンス - Promise はクラスなので new 演算子で Promise のインスタンスを作成し、利用する - コンストラクタには resolve 関数と reject 関数の2つの引数を取る関数（executor）を渡す const promise = new Promise((resolve, reject) => { // 非同期の処理が成功したときはresolveを呼ぶ // 非同期の処理が失敗したときはrejectを呼ぶ });
43. Promise インスタンスには状態変化をした際に呼び出されるコールバック関数を登録できる Promise で非同期処理を扱う
44. Promise インスタンスには状態変化をした際に呼び出されるコールバック関数を登録できる fulfilled or rejected の2択 （Promise 生成直後の基本状態は pending のため） = 非同期処理が成功したときと、失敗したときのコールバック関数が登録できる Promise で非同期処理を扱う
45. const promise = () => { return new Promise((resolve, reject) => { const success = Math.random() > 0.5; // 50%の確率で成功 setTimeout(() => { if (success) resolve("成功！"); // 非同期処理成功 else reject("失敗！"); // 非同期処理失敗 }, 2000); }); } 非同期処理をする Promise インスタンスを返す関数を作成してみよう
46. promise() .then((result) => { console.log(result); // 非同期処理成功 }).catch((error) => { console.error(error); // 非同期処理失敗 }); 非同期処理の結果を扱う then や catch メソッドで成功時や失敗時に呼び出される処理をコールバック関数として登録する
47. status pending result undefined status “fulfilled” result value status “rejected” result error resolve(value) reject(error) Promise の状態と結果値
48. get(‘/step1’, (a) => { get(`/step2/${a}`, (b) => { get(`/step3/${b}`, (c) => { get(`/step4/${c}`, (d) => { console.log(c) }) }) }) }) Promise のメリット(1) - Callback Hell の解消 get('/step1') .then((a) => get(`/step2/${a}`)) .then((b) => get(`/step3/${b}`)) .then((c) => get(`/step4/${c}`)) .then((d) => { console.log(d); }) Callback Promise
49. get(‘/step1’, (a) => { get(`/step2/${a}`, (b) => { get(`/step3/${b}`, (c) => { get(`/step4/${c}`, (d) => { console.log(c) }) }) }) }) Promise のメリット(1) - Callback Hell の解消 Callback Promise get('/step1') .then((a) => get(`/step2/${a}`)) .then((b) => get(`/step3/${b}`)) .then((c) => get(`/step4/${c}`)) .then((d) => { console.log(d); }) Promise の後続処理メソッドはいつも Promise インスタンスを返すので、連続的に 呼び出すことができる。これをPromise チェーン (promise chaining)と呼ぶ。
50. Promise のメリット(2) - エラーハンドリング Callback Promise try { setTimeout(() => { throw new Error("Error!") }, 0) } catch (error) { console.error("エラー", error) } new Promise((_, reject) => { setTimeout(() => { reject(new Error("Error!")) }, 0) }).catch(error => { console.error("エラー", error) })
51. Promise のメリット(2) - エラーハンドリング Callback Promise try { setTimeout(() => { throw new Error("Error!") }, 0) } catch (error) { console.error("エラー", error) } new Promise((_, reject) => { setTimeout(() => { reject(new Error("Error!")) }, 0) }).catch(error => { console.error("エラー", error) }) エラーがキャッチできる
52. でも Promise にも限界はある
53. Promise の限界(1) - あいかわらず複雑 get('/step1') .then((a) => get(`/step2/${a}`)) .then((b) => get(`/step3/${b}`)) .then((c) => get(`/step4/${c}`)) .then((d) => { console.log(d); }) Callback Hell よりは改善されたけど、 非同期処理が複数あって Promise チェーンが 長くなったらやはり可読性が落ちる
54. Promise の限界(2) - エラーハンドリングも複雑になりえる get('/step1') .then((a) => get(`/step2/${a}`)) .then((b) => get(`/step3/${b}`)) .then((c) => get(`/step4/${c}`)) .then((d) => { console.log(d); }) このコードでエンドポイントごとにエラーハンドリングをしたら？
55. Promise の限界(2) - エラーハンドリングも複雑になりえる get('/step1') .then(a => get(`/step2/${a}`)) .catch(error => console.error(`Step 1 failed: ${error}`)) .then(b => get(`/step3/${b}`)) .catch(error => console.error(`Step 2 failed: ${error}`)) .then(c => get(`/step4/${c}`)) .catch(error => console.error(`Step 3 failed: ${error}`)) .then(d => console.log(d)) .catch(error => console.error(`Step 4 failed: ${error}`)); （なにがなんだか、、）
56. この限界を克服するために登場したものが、、
57. 3. async/await
58. async/await とは - ES8(2017年)で投入された、非同期処理を行う関数を定義する構文 - Async Function は通常の関数とは異なり、必ずPromiseインスタンスを返す
59. async function doAsync() { return "値"; } doAsync().then(value => { console.log(value); // => "値" }); Async Function は必ずPromiseインスタンスを返す Async Function は関数の定義に async キーワードをつけることで定義できる Async Function ＊Typescript の型推論でも Promise 型になる
60. async function doAsync() { return "値"; } doAsync().then(value => { console.log(value); // => "値" }); Async Function は必ずPromiseインスタンスを返す function doAsync() { return Promise.resolve("値"); } doAsync().then(value => { console.log(value); // => "値" }); Async Function 通常の Function Async Functionは Promise の上に作られた構文 ＊返り値をラップしたPromiseインスタンスを返す この２つのコードは同じことをやってる
61. const promise = () => { return new Promise((resolve, reject) => { const success = Math.random() > 0.5; // 50%の確率で成功 setTimeout(() => { if (success) resolve("成功！"); // 非同期処理成功 else reject("失敗！"); // 非同期処理失敗 }, 2000); }); } Async Function で非同期処理を扱ってみよう 非同期処理をするために Promise インスタンスを返す関数を作成（ここまでは先と同じ）
62. promise() .then((result) => { console.log(result); // 非同期処理成功 }).catch((error) => { console.error(error); // 非同期処理失敗 }); const handlePromise = async () => { try { const result = await promise(); console.log(result); // 非同期処理成功 } catch (error) { console.error(error); // 非同期処理失敗 } } 非同期処理の結果を扱う Promiseチェーン Async Function
63. promise() .then((result) => { console.log(result); // 非同期処理成功 }).catch((error) => { console.error(error); // 非同期処理失敗 }); const handlePromise = async () => { try { const result = await promise(); console.log(result); // 非同期処理成功 } catch (error) { console.error(error); // 非同期処理失敗 } } 非同期処理の結果を扱う Promiseチェーン Async Function Async Function内では await 式が利用できる
64. await 式 - Promise の非同期処理が完了するまで待つ構文 - Promiseインスタンスの状態が変わると、次の行の処理を再開 async function doAsync() { // 非同期処理 } async function asyncMain() { // doAsyncの非同期処理が完了するまでまつ await doAsync(); // 次の行はdoAsyncの非同期処理が完了されるまで実行されない console.log("この行は非同期処理が完了後に実行される"); }
65. await 式 - Promise の非同期処理が完了するまで待つ構文 - Promiseインスタンスの状態が変わると、次の行の処理を再開 async function doAsync() { // 非同期処理 } async function asyncMain() { // doAsyncの非同期処理が完了するまでまつ await doAsync(); // 次の行はdoAsyncの非同期処理が完了されるまで実行されない console.log("この行は非同期処理が完了後に実行される"); } - fulfilled の場合、resolve された値が await 式の返り値となる - rejected の場合、その場でエラーを throw する
66. 最初の質問の正解大公開 await で非同期処理の完了を待つので、resolve され た値である string が推論される await がない＝非同期処理の完了を待たないので、 Promise<string> 型が推論される
67. get('/step1') .then((a) => get(`/step2/${a}`)) .then((b) => get(`/step3/${b}`)) .then((c) => get(`/step4/${c}`)) .then((d) => { console.log(d); }) Promise async function fetchData() { const a = await get('/step1'); const b = await get(`/step2/${a}`); const c = await get(`/step3/${b}`); const d = await get(`/step4/${c}`); } fetchData(); async/await のメリット(1) - 非同期を同期のように Async Function
68. get('/step1') .then(a => get(`/step2/${a}`)) .catch(error => console.error(`Step 1 failed: ${error}`)) .then(b => get(`/step3/${b}`)) .catch(error => console.error(`Step 2 failed: ${error}`)) .then(c => get(`/step4/${c}`)) .catch(error => console.error(`Step 3 failed: ${error}`)) .then(d => console.log(d)) .catch(error => console.error(`Step 4 failed: ${error}`)); async/await のメリット(2) - エラーハンドリングが分かりやすく 先のなにがなんだかコード
69. async function fetchData() { const a = await fetchStep1(); if (!a) return; // エラーが起きたら終了 const b = await fetchStep2(); if (!b) return; // エラーが起きたら終了 const c = await fetchStep3(); if (!c) return; // エラーが起きたら終了 const d = await fetchStep4(); if (d) console.log(d); } fetchData(); async function fetchStep1() { try { return await get('/step1'); } catch (error) { console.error(`Step 1 failed: ${error}`); return null; // エラー発生時は null 返す } } async/await のメリット(2) - エラーハンドリングが分かりやすく こんな感じで各ステップを関数で切り出して、、 順番通り呼び出す
70. 4. まとめ
71. コールバック関数 - Callback Hell、エラーキャッチが難しいという限界がある Promise - ES6(2015年)で投入された、非同期処理の状態や結果を表現するビルトインオブジェクト - Promise チェーンを使って Callback Hell を解決できるし、エラーもキャッチできる - Promise チェーンが長くなったら複雑になるし、部分的なエラーハンドリングも複雑になりえる async/await - EES8(2017年)で投入された、非同期処理を行う関数を定義する構文 - Async FunctionはPromiseの上に作られた構文であり、必ず Promise インスタンスを返す - 非同期処理を同期処理のように使えるし、エラーハンドリングも分かりやすくなる
72. ご清聴ありがとうございました
73. - 이웅모, 『모던 자바스크립트 Deep Dive : 자바스크립트의 기본 개념과 동작 원리』, 위키북스 , 2020 - JavaScript Primer, 「[ES2015] Promise」, https://jsprimer.net/basic/async/#promise, (2024.10.14) - JavaScript Primer, 「[ES2017] Async Function」,https://jsprimer.net/basic/async/#async-function , (2024.10.15) 参考資料