Promise、async/await

Promiseの基本

非同期処理を行うためのPromise、async/awaitについて解説していきます。

Promiseは「pending」、「fulfilled」、「rejected」の状態を持ちます。

• pending: 非同期処理がまだ完了していない状態
• fulfilled: 非同期処理が成功し、結果が利用可能な状態
• rejected: 非同期処理が失敗し、エラーが発生した状態

Promiseが生成されると、まずはpending状態になります。
その後、非同期処理が成功すればfulfilledに、失敗すればrejectedの状態が変わります。

Promiseの作成と利用

Promiseは以下のように作成します。

const promise = new Promise((resolve, reject) => {
  // 非同期処理
});

この非同期処理が成功すればresolve関数を、失敗すればreject関数を呼び出します。
それぞれの関数には、非同期処理の結果またはエラー情報を引数として渡すことができます。

Promiseの結果はthenメソッドを使って取得します。
このメソッドは、Promiseがfulfilled状態になったときに実行されるコールバック関数を登録するためのものです。

promise.then((result) => {
  // 非同期処理の結果を利用する
});

また、Promiseがrejected状態になったときにはcatchメソッドを使ってエラーを処理します。

promise.catch((error) => {
  // エラーの処理
});

繋げて利用することも可能です

promise
  .then((result) => {
      // 非同期処理の結果を利用する
  })
  .catch((error) => {
      // エラーの処理
  });

async/awaitの基本

async/awaitは、JavaScriptにおける非同期処理をより簡潔に書くための機能です。
asyncとawaitはキーワードで、一緒に使われることが多いです。

asyncは関数に付けられ、その関数が必ずPromiseを返すことを示します。
そのPromiseの結果は、関数の戻り値として得ることができます。

async function fetchData() {
  return "data";
}

const promise = fetchData();

上記の例では、fetchData関数はPromiseを返します。
このPromiseはすぐにfulfilled状態になり、その結果は文字列"data"です。

awaitの利用

awaitは、Promiseの結果を待つために使われます。
awaitはasync関数の中でのみ使用できます。

async function fetchData() {
  const response = await fetch("https://example.com/data");
  const data = await response.json();
  return data;
}

上記の例では、fetch関数はサーバーからデータを取得するPromiseを返します。
awaitはこのPromiseがfulfilledになるのを待ち、その結果をresponse変数に代入します。

その後、response.jsonメソッドはレスポンスのボディを解析するPromiseを返します。
再びawaitがこのPromiseがfulfilledになるのを待ち、その結果をdata変数に代入します。

最終的に、fetchData関数は解析されたデータを含むPromiseを返します。

Promise.allを使った例

Promise.allとasync/awaitを使えば、更に簡潔に書くことができます。

async function fetchAllData() {
  const response1 = fetch("https://example.com/data1");
  const response2 = fetch("https://example.com/data2");
  const response3 = fetch("https://example.com/data3");

  const responses = await Promise.all([response1, response2, response3]);

  const data1 = await responses[0].json();
  const data2 = await responses[1].json();
  const data3 = await responses[2].json();

  return [data1, data2, data3];
}

分かりやすいように書いていますが短縮すると下記になります

async function fetchAllData() {
  const urls = ["https://example.com/data1", "https://example.com/data2", "https://example.com/data3"];
  const responses = await Promise.all(urls.map(url => fetch(url)));
  return await Promise.all(responses.map(response => response.json()));
}

async/awaitによるエラーハンドリング

async function fetchData() {
  try {
    const response = await fetch("https://example.com/data");
    return await response.json();
  } catch (error) {
    // エラーの処理
    console.error("Error:", error);
  }
}

上記の例では、fetch関数やresponse.jsonメソッドがエラーをスローすると、そのエラーはcatchブロックで捕捉されます。
エラーの詳細はerror変数に代入され、それを使ってエラーの処理を行います。

まとめ

JavaScriptのPromiseとasync/awaitは、非同期処理を扱うための強力なツールです。Promiseは非同期処理の結果を表現するオブジェクトで、async/awaitはその非同期処理をより直感的に書くための機能です。
これらの機能をうまく使いこなすことで、非同期処理を含む複雑なプログラムも簡潔にかつ効率的に書くことができます。