非同期 JavaScript: Promise、Async/Await、およびコールバック

元々は Makemychance.com で公開されました

非同期プログラミングは JavaScript の中核的な概念であり、他のコードの実行をブロックすることなくタスクを実行できます。これは、ネットワーク要求、ファイル I/O、タイマーなど、完了までに時間がかかる操作を処理する場合に特に重要になります。この記事では、JavaScript で非同期コードを処理するための 3 つの主な手法、コールバック、プロミス、および Async/Await について説明します。

1. コールバック

コールバックは、JavaScript で非同期操作を処理する最も古い方法です。コールバックは、単に別の関数に引数として渡される関数であり、タスクの完了後に実行されます。

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 2000);
}

fetchData((message) => {
  console.log(message);
});

上記の例では、fetchData は setTimeout を使用してネットワーク リクエストをシミュレートし、リクエストの完了後にコールバック関数がメッセージをログに記録します。

コールバック地獄

コールバックを使用することの欠点の 1 つは、悪名高い「コールバック地獄」または「破滅のピラミッド」です。コールバックが複数ネストされていると、コードの読み取りと保守が困難になります。

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. 約束

ES6 で導入された Promise は、非同期タスクを処理するためのよりクリーンなアプローチを提供し、深くネストされたコールバックの課題を克服するのに役立ちます。基本的に、Promise は非同期操作の結果 (正常に完了したか失敗したか) を象徴するオブジェクトであり、結果の値を処理するための構造化された方法を提供します。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

この例では、fetchData は Promise を返します。 .then() メソッドは Promise の解決された値を処理するために使用され、.catch() はエラーを処理するために使用されます。

約束を連鎖させる

Promise を連鎖させることができるため、コードが読みやすく、保守しやすくなります。

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. 非同期/待機

ES8 (2017) で導入された Async/Await は、Promise の上に構築された構文糖衣であり、非同期コードの外観と動作を同期コードに近づけます。

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

この例では、processData 関数は await キーワードを使用して、fetchData によって返された Promise が解決されるのを待ちます。これにより、Promise チェーンと比較してコードがはるかにクリーンになり、理解しやすくなります。

エラー処理

async/await でのエラー処理は try...catch ブロックを使用して行われ、.catch() メソッドを必要とせずにエラーを処理する簡単な方法を提供します。

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

以上が非同期 JavaScript: Promise、Async/Await、およびコールバックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。