理解 JavaScript 中的 Promise 和 Promise Chaining-js教程-PHP中文網

理解 JavaScript 中的 Promise 和 Promise Chaining

Linda Hamilton

發布： 2024-09-24 10:30:30

原創

482 人瀏覽過

Understanding Promises and Promise Chaining in JavaScript

什麼是承諾？

JavaScript 中的 Promise 就像你對未來做某事的「承諾」。它是一個對象，表示非同步任務的最終完成（或失敗）及其結果值。簡而言之，Promise 充當尚不可用但將來可用的值的佔位符。

承諾國家

Promise 可以存在於以下三種狀態之一：

Pending：Promise 的初始狀態，仍在等待非同步任務完成。
Fulfilled：Promise 成功完成的狀態，且結果值可用。
Rejected：Promise 失敗的狀態，傳回錯誤而不是預期值。

承諾如何發揮作用？

Promise 是使用 Promise 建構子建立的，它有兩個參數：resolve 和reject——兩者都是函數。

如果非同步操作成功，則呼叫resolve函數來履行承諾。
如果出現問題，您可以呼叫拒絕函數來表示 Promise 由於錯誤而被拒絕。
您可以使用 .then() 來處理 Promise 的結果以獲得成功，並使用 .catch() 來處理錯誤。

範例：建立和使用 Promise

const fetchData = new Promise((resolve, reject) => {
  // Simulate an asynchronous task like fetching data from a server
  setTimeout(() => {
    const data = "Some data from the server";

    // Simulate success and resolve the promise
    resolve(data);

    // You can also simulate an error by rejecting the promise
    // reject(new Error("Failed to fetch data"));
  }, 1000);
});

// Consuming the Promise
fetchData
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

登入後複製

當 Promise 完成時，resolve(data) 將傳回成功的資料。
如果出現問題，reject(error) 會拋出錯誤，可以使用 .catch() 處理。

什麼是承諾鏈？

Promise Chaining 是使用 Promise 依序執行一系列非同步任務的過程。鏈中的每個 .then() 方法在前一個方法完成後運行。

為什麼要使用承諾鏈？

它允許您編寫乾淨、可讀的程式碼來按特定順序處理多個非同步操作。每個 .then() 都可以傳回一個值，該值傳遞給鏈中的下一個 .then()，讓您可以逐步處理任務。

範例：連結多個 Promise

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); // Initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;   // Returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 2
    return result * 3;   // Returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 6
    return result * 4;   // Returns 24 to the next .then()
  });

登入後複製

在此範例中：

Promise 在 1 秒後以 1 開始解決。
隨後的每個 .then() 都會接收前一個 .then() 的結果，將其加倍或三倍，然後將其傳遞給下一個 .then()。
結果將逐步記錄：1、2、6。
連結中的錯誤處理
您可以使用 .catch() 來擷取 Promise 鏈中的任何錯誤。如果任何 .then() 失敗，鏈就會停止，並且錯誤將傳遞到 .catch() 區塊。

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });

登入後複製