使用異步 /等待與承諾的差異？

JavaScript非同步操作：Promise與async/await詳解

Promise和async/await是JavaScript處理非同步操作的兩種方式。本文將闡述它們的差異、優點和適用場景。

Promise

1. 定義： Promise物件代表非同步操作的最終完成（或失敗）及其結果值。
2. 文法：

<code class="language-javascript">const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据已获取");
    }, 1000);
  });
};

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

3. 關鍵特性：

• 使用.then()處理成功結果。
• 使用.catch()處理錯誤。
• 可以使用.then()鍊式呼叫多個非同步操作。

4. 優勢：

• 比回調地獄好（.then()鍊式呼叫比巢狀回呼更清晰）。
• 使用.catch()進行明確的錯誤處理。

5. 挑戰：

• 當處理許多Promise時，鍊式呼叫仍然可能難以閱讀（稱為“Promise地獄”）。
• 在鍊式呼叫多個.then()時，錯誤處理可能需要額外注意。

---

Async/Await

1. 定義： async/await是基於Promise建構的語法糖，讓非同步程式碼看起來和運作起來更像同步程式碼。
2. 文法：

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

fetchData();</code>

3. 關鍵特性：

• 使用async關鍵字宣告傳回Promise的函數。
• 使用await暫停執行，直到Promise完成。
• 使用try...catch處理錯誤。

4. 優勢：

• 程式碼可讀性：與.then()鍊式呼叫相比，語法更清晰易懂。
• 更容易偵錯：偵錯工具可讓您像同步程式碼一樣單步執行async/await程式碼。
• try...catch用於集中式錯誤處理。

5. 挑戰：

• 必須在用async宣告的函數內使用。
• 如果在循環或順序非同步呼叫中處理不當，有時可能導致阻塞行為。

---

---

何時使用

Promise：

• 用於簡單的一次性非同步操作。
• 當使用圍繞Promise設計的函式庫或API時。
• 當鍊式呼叫多個無關的操作。

Async/Await：

• 用於具有多個依賴非同步操作的複雜工作流程。
• 當需要更清晰、更易讀的程式碼。
• 當調試至關重要時。

---

組合使用

可以將async/await與Promise結合使用，以實現高階用例：

<code class="language-javascript">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();</code>

以上是使用異步 /等待與承諾的差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！