☺️

【JavaScript】非同期処理をAsync/Awaitで制御する

2024/01/24に公開

JavaScript

Async/Awaitとは

非同期処理の制御をより直感的に書くための構文。

asyncキーワードを関数の前につけることで、その関数はasync関数になる
async関数は自動的にPromiseを返す。関数内でreturnで返される値はPromiseが成功(fulfilled)状態になる(setTimeoutなどの非Promiseなものはreturn new Promiseでラップしないといけない！)
async関数内でエラーなどの例外が発生すると、Promiseは失敗(rejected)状態となる。
await演算子はasync関数の中で使用できる
awaitをつけると、はPromiseが解決されるまで一時待機する。解決とは、Promiseの状態がfulfilledまたはrejectedの状態になること。

3つのログを表示するコード

const displayMessage = () => {
  setTimeout(() => {
    console.log(`disPlayMessage関数が実行`);
  }, 2000);
};

console.log("関数を実行します。");
displayMessage();
console.log("関数が実行されました。");

出力結果

関数を実行します。
関数が実行されました。
displayMessage関数が実行

displayMessage関数内のログの表示(displayMessage関数が実行)を待ってから関数が実行されましたを出力させたい場合

async/awaitでリファクタリングしたコード

const displayMessage = () => {
  return new Promise((resolve) => { // setTimeoutはPromiseでラップする必要あり
    setTimeout(() => {
      console.log(`displayMessage関数が実行`);
      resolve();  // Promiseが解決される
    }, 2000);
  });
};

const runAsyncFunction = async () => {
  console.log("関数を実行します。");
  await displayMessage();  // displayMessageが完了するまでこの行で待機
  console.log("関数が実行されました。");
};

runAsyncFunction();

出力結果

関数を実行します。
displayMessage関数が実行
関数が実行されました。

Async/Awaitとは

Discussion