async/await 最小限まとめ

想定読者

• 同期処理や非同期処理とか、Promiseとか沢山出てきて混乱する人
• 超シンプルに、最低限async/awaitを使えるようになりたい人

マジでシンプルに書くので、この記事はasync/awaitの導入です。
とりあえず動かしたい人向け。

この記事を読んだら詳しい他の記事に飛んでくださいね。

やること

『Aの処理が完了したあとにBの処理を実行する』みたいな、『明示的に順番に実行すること』を目指します。

API叩く→レスポンスを表示する とか、順番を守らないとうまく動作しないときがあります。
これちゃんとしないと、API呼んでいる最中にレスポンスを表示する処理が走って、『APIレスポンスまだ受け取ってないので表示できません』ってエラーが出ます。

書き方

async/awaitを使わないと失敗する

// 各処理を呼び出す関数
const example = async () => {
  test1();
  test2();
  test3();
}

// 3秒後にconsole.logする関数
const test1 = () => {
  setTimeout(() => {
    console.log('test1');
  }, 3000);
}

const test2 = () => {
  console.log('test2');
}

const test3 = () => {
  console.log('test3');
}

example();

出力結果

"test2"
"test3"
"test1"

一見、順番に呼び出しているように見えますが、test1が3秒後に出力されるようになっているので、それを待たずしてtest2とtest3が出力されています。
なので、test1が一番遅く出力されましたね。

async/awaitを使って順番に実行する

async/awaitでちゃんと順番を守らせましょう。

// 各処理を呼び出す関数
// awaitを使う関数自身にはasyncをつける
const example = async () => {
  // 処理の完了を待ってほしい関数の前にawaitをつける
  await test1();
  test2();
  test3();
}

// 3秒後にconsole.logする関数
const test1 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('test1');
      // このresolveが完了したら次の処理（test2）に移る
      resolve();
    }, 3000);
  });
}

const test2 = () => {
  console.log('test2');
}

const test3 = () => {
  console.log('test3');
}

example();

出力結果

"test1"
"test2"
"test3"

時間のかかるtest1()にawaitをつけたことで、resolve()に辿り着くまで後続の処理を待ってくれます。
実務で言えば時間のかかるtest1()はAPI通信を行う関数などに置き換えることが出来ます。
API通信が無事完了してから、後続の処理を行うイメージです。