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

async await完全に理解した

asuka
November 25, 2021
50

async await完全に理解した

2021年のスライド

asuka

November 25, 2021
Tweet

Transcript

  1. async awaitとは何か async await → 非同期関数の構文 非同期関数 非同期関数は async キーワードで宣言され、その中で

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

    async キーワードで宣言され、その中で await キーワードを使うことができます。 async および await キーワードを使用することで、 プロミスベースの非同期の動作を、プロミスチェー ンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。 MDN Web Docs
  3. そもそも非同期処理とは何か 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 非同期
  4. そもそも非同期処理とは何か 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
  5. 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(); // 非同期関数
  6. 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によってシンプルな構文になる (糖衣構文)
  7. 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によってシンプルな構文になる (糖衣構文)
  8. Promiseとは何か Promise → 非同期処理の完了の結果およびその結果の値を表す C#のTask や DartのFuture に相当する Promise 作成された時点では分からなくてもよい値へのプロキシーです。

    非同期のアクションの成功値または 失敗理由にハンドラーを結びつけることができます。 これにより、非同期メソッドは結果の値を返す 代わりに、未来のある時点で値を提供するプロミスを返すことで、同期メソッドと同じように値を返す ことができるようになります。 MDN Web Docs
  9. 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(成功時)
  10. 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(成功時) 非同期のアクションの成功値または失敗理由にハンドラーを結び つけることができる
  11. JavaScriptにおける非同期処理 start end any... any... 非同期 スレッド while (true) {...}

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

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

    並行して行われることがない 非同期処理を呼び出した後,非同期処理が実行されるまで の処理が一向に終わらない場合,ブラウザはどうなるのか? 非同期処理が終わらないのもダメ any...
  14. ベストプラクティス 1. 1つの処理が数秒以上実行するような処理を書かない a. 小さい処理の実行単位で非同期処理にする 2. 非同期処理 ≠ 並行処理である a.

    非同期で呼び出す処理自体も小さくする必要がある start end any... any... 非同期 スレッド any... 非同期 ...