async await完全に理解した asuka y Nov. 25 2021

対象 JavaScript完全に理解した人

アジェンダ 1. async awaitとは何か 2. JavaScriptにおけるasync await 3. ベストプラクティス

1. async awaitとは何か

async awaitとは何か async await → 非同期関数の構文 非同期関数 非同期関数は async キーワードで宣言され、その中で await キーワードを使うことができます。 async および await キーワードを使用することで、プロミスベースの非同期の動作を、プロミスチェー ンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。 MDN Web Docs

async awaitとは何か async await → 非同期関数の構文 → 糖衣構文だとわかる 非同期関数 非同期関数は async キーワードで宣言され、その中で await キーワードを使うことができます。 async および await キーワードを使用することで、 プロミスベースの非同期の動作を、プロミスチェー ンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。 MDN Web Docs

そもそも非同期処理とは何か 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 非同期

そもそも非同期処理とは何か 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

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(); // 非同期関数

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によってシンプルな構文になる (糖衣構文)

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によってシンプルな構文になる (糖衣構文)

Promiseとは何か Promise → 非同期処理の完了の結果およびその結果の値を表す C#のTask や DartのFuture に相当する Promise 作成された時点では分からなくてもよい値へのプロキシーです。 非同期のアクションの成功値または 失敗理由にハンドラーを結びつけることができます。 これにより、非同期メソッドは結果の値を返す 代わりに、未来のある時点で値を提供するプロミスを返すことで、同期メソッドと同じように値を返す ことができるようになります。 MDN Web Docs

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(成功時)

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(成功時) 非同期のアクションの成功値または失敗理由にハンドラーを結び つけることができる

2. JavaScriptにおけるasync await

2. JavaScriptにおけるasync await 非同期処理

JavaScriptにおける非同期処理 GoやC#では非同期処理といえば並行処理であるが， 挙動から推測するにJavaScriptは並行処理ではない (おそらく歴史的経緯により) Dartもシングルスレッドである JavaScript プロトタイプベースで、 シングルスレッドで、動的型付けを持ち、そしてオブジェクト指向、命令型、宣 言型 (関数プログラミングなど ) といったスタイルをサポートするマルチパラダイムのスクリプト言語で す。 MDN Web Docs

スレッド2 並行処理 start end any... any... 非同期 メインスレッド any... ランタイム側で同時実行しているように 見せかけるようタスクをスケジュールす る

JavaScriptにおける非同期処理 start end any... any... 非同期 スレッド any... 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない

JavaScriptにおける非同期処理 start end any... any... 非同期 スレッド while (true) {...} 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない 非同期処理を呼び出した後，非同期処理が実行されるまで の処理が一向に終わらない場合，ブラウザはどうなるのか?

JavaScriptにおける非同期処理 start end any... any... 非同期 スレッド while (true) {...} 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない 非同期処理を呼び出した後，非同期処理が実行されるまで の処理が一向に終わらない場合，ブラウザはどうなるのか? 画面が一切応答しなくなる (呼び出した非同期処理も実行されない )

JavaScriptにおける非同期処理 start end any... 非同期 スレッド while (true) {...} 1スレッド内で処理が行われるため，同時に複数の処理が 並行して行われることがない 非同期処理を呼び出した後，非同期処理が実行されるまで の処理が一向に終わらない場合，ブラウザはどうなるのか? 非同期処理が終わらないのもダメ any...

ベストプラクティス

ベストプラクティス 1. 1つの処理が数秒以上実行するような処理を書かない a. 小さい処理の実行単位で非同期処理にする 2. 非同期処理 ≠ 並行処理である a. 非同期で呼び出す処理自体も小さくする必要がある start end any... any... 非同期 スレッド any... 非同期 ...

async await完全に理解した END