async / await と Promise の使用の違いは?

JavaScript の非同期操作: Promise と async/await の詳細な説明

Promise と async/await は、JavaScript が非同期操作を処理する 2 つの方法です。この記事では、それらの違い、利点、適用可能なシナリオについて説明します。

約束

1. 定義: Promise オブジェクトは、非同期操作の最終的な完了 (または失敗) とその結果値を表します。
2. 文法:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据已获取");
    }, 1000);
  });
};

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

3. 主な機能:

• 成功した結果を処理するには、.then() を使用します。
• エラーを処理するには .catch() を使用します。
• .then() を使用して、複数の非同期操作を連鎖的に呼び出すことができます。

4. 利点:

• コールバック地獄よりは良い (.then()連鎖呼び出しはネストされたコールバックよりもクリーンです)。
• 明示的なエラー処理には .catch() を使用します。

5. チャレンジ:

• 多くの Promise を扱う場合、連鎖呼び出しは依然として読みにくい場合があります (「Promise Hell」と呼ばれます)。
• 複数の .then() 呼び出しを連鎖させる場合、エラー処理に特別な注意が必要になる場合があります。

---

非同期/待機

1. 定義: async/await は Promise に基づいて構築された糖衣構文であり、非同期コードを同期コードのように見せて実行させることができます。
2. 文法:

const fetchData = async () => {
  try {
    const data = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("数据已获取");
      }, 1000);
    });
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

3. 主な機能:

• async キーワードを使用して、Promise を返す関数を宣言します。
• await を使用して、Promise が完了するまで実行を一時停止します。
• エラーを処理するには try...catch を使用します。

4. 利点:

• コードの可読性: .then() チェーン呼び出しと比較して、構文が明確で理解しやすいです。
• デバッグが簡単: デバッグ ツールを使用すると、同期コードと同じように非同期/待機コードをステップ実行できます。
• try...catch は集中エラー処理に使用されます。

5. チャレンジ:

• は、async で宣言された関数内で使用する必要があります。
• ループまたは連続した非同期呼び出しで適切に処理されないと、ブロック動作が発生することがあります。

---

---

いつ使用するか

約束:

• 単純な 1 回限りの非同期操作用。
• Promise を中心に設計されたライブラリまたは API を使用する場合。
• 複数の無関係な操作がチェーンで呼び出される場合。

非同期/待機:

• 複数の依存する非同期操作を含む複雑なワークフロー用。
• より明確で読みやすいコードが必要です。
• デバッグが重要な場合。

---

組み合わせて使う

高度なユースケースでは、Async/await を Promise と組み合わせることができます:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("数据已获取"), 1000);
  });
};

const processData = async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

processData();

以上がasync / await と Promise の使用の違いは?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。