async await完全に理解した

2021年のスライド

Transcript

1. async await完全に理解した asuka y Nov. 25 2021
2. 対象 JavaScript完全に理解した人
3. アジェンダ 1. async awaitとは何か 2. JavaScriptにおけるasync await 3. ベストプラクティス
4. 1. async awaitとは何か
5. async awaitとは何か async await → 非同期関数の構文 非同期関数 非同期関数は async キーワードで宣言され、その中で await キーワードを使うことができます。 async および await キーワードを使用することで、プロミスベースの非同期の動作を、プロミスチェー ンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。 MDN Web Docs
6. async awaitとは何か async await → 非同期関数の構文 → 糖衣構文だとわかる 非同期関数 非同期関数は async キーワードで宣言され、その中で await キーワードを使うことができます。 async および await キーワードを使用することで、 プロミスベースの非同期の動作を、プロミスチェー ンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。 MDN Web Docs
7. そもそも非同期処理とは何か function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } function asyncCall() { console.log('calling'); resolveAfter2Seconds(); console.log('called'); } asyncCall(); ①→ ❷→ ③→ start end ① calling ③ called ❷ resolved 非同期
8. そもそも非同期処理とは何か function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } async function asyncCall() { console.log('calling'); await resolveAfter2Seconds(); console.log('called'); } asyncCall(); // 非同期関数 ①→ ❷→ ③→ start end ① calling ③ called 非同期 ❷ resolved
9. async awaitを利用しない場合 function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } function asyncCall() { return new Promise(resolve => { console.log('calling'); resolveAfter2Seconds().then(() => { console.log('called'); }); }); } asyncCall(); // 非同期関数
10. async awaitを利用しない場合 function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } function asyncCall() { return new Promise(resolve => { console.log('calling'); resolveAfter2Seconds().then(() => { console.log('called'); }); }); } asyncCall(); // 非同期関数 function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } async function asyncCall() { console.log('calling'); await resolveAfter2Seconds(); console.log('called'); } asyncCall(); // 非同期関数 async awaitによってシンプルな構文になる (糖衣構文)
11. Promiseとは何か function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } function asyncCall() { return new Promise(resolve => { console.log('calling'); resolveAfter2Seconds().then(() => { console.log('called'); }); }); } asyncCall(); // 非同期関数 function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } async function asyncCall() { console.log('calling'); await resolveAfter2Seconds(); console.log('called'); } asyncCall(); // 非同期関数 async awaitによってシンプルな構文になる (糖衣構文)
12. Promiseとは何か Promise → 非同期処理の完了の結果およびその結果の値を表す C#のTask や DartのFuture に相当する Promise 作成された時点では分からなくてもよい値へのプロキシーです。 非同期のアクションの成功値または 失敗理由にハンドラーを結びつけることができます。 これにより、非同期メソッドは結果の値を返す 代わりに、未来のある時点で値を提供するプロミスを返すことで、同期メソッドと同じように値を返す ことができるようになります。 MDN Web Docs
13. Promiseとは何か ①→ ❷→ ③→ start end ① calling ③ called ❷ resolved 非同期 function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } function asyncCall() { return new Promise(resolve => { console.log('calling'); resolveAfter2Seconds().then(() => { console.log('called'); }); }); } asyncCall(); // 非同期関数 then(成功時)
14. Promiseとは何か ①→ ❷→ ③→ start end ① calling ③ called ❷ resolved 非同期 function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { console.log('resolved'); resolve(); }, 2000); }); } function asyncCall() { return new Promise(resolve => { console.log('calling'); resolveAfter2Seconds().then(() => { console.log('called'); }); }); } asyncCall(); // 非同期関数 then(成功時) 非同期のアクションの成功値または失敗理由にハンドラーを結び つけることができる
15. 2. JavaScriptにおけるasync await
16. 2. JavaScriptにおけるasync await 非同期処理
17. JavaScriptにおける非同期処理 GoやC#では非同期処理といえば並行処理であるが， 挙動から推測するにJavaScriptは並行処理ではない (おそらく歴史的経緯により) Dartもシングルスレッドである JavaScript プロトタイプベースで、 シングルスレッドで、動的型付けを持ち、そしてオブジェクト指向、命令型、宣 言型 (関数プログラミングなど ) といったスタイルをサポートするマルチパラダイムのスクリプト言語で す。 MDN Web Docs
18. スレッド2 並行処理 start end any... any... 非同期 メインスレッド any... ランタイム側で同時実行しているように 見せかけるようタスクをスケジュールす る
19. JavaScriptにおける非同期処理 start end any... any... 非同期 スレッド any... 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない
20. JavaScriptにおける非同期処理 start end any... any... 非同期 スレッド while (true) {...} 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない 非同期処理を呼び出した後，非同期処理が実行されるまで の処理が一向に終わらない場合，ブラウザはどうなるのか?
21. JavaScriptにおける非同期処理 start end any... any... 非同期 スレッド while (true) {...} 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない 非同期処理を呼び出した後，非同期処理が実行されるまで の処理が一向に終わらない場合，ブラウザはどうなるのか? 画面が一切応答しなくなる (呼び出した非同期処理も実行されない )
22. JavaScriptにおける非同期処理 start end any... 非同期 スレッド while (true) {...} 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない 非同期処理を呼び出した後，非同期処理が実行されるまで の処理が一向に終わらない場合，ブラウザはどうなるのか? 非同期処理が終わらないのもダメ any...
23. ベストプラクティス
24. ベストプラクティス 1. 1つの処理が数秒以上実行するような処理を書かない a. 小さい処理の実行単位で非同期処理にする 2. 非同期処理 ≠ 並行処理である a. 非同期で呼び出す処理自体も小さくする必要がある start end any... any... 非同期 スレッド any... 非同期 ...
25. async await完全に理解した END