JavaScript 非同步程式設計
JavaScript - 非同步程式設計
JavaScript - 回撥函式
JavaScript - Promise
JavaScript - Async/Await
JavaScript - 微任務
JavaScript - Promisification (Promise 化)
JavaScript - Promise 鏈式呼叫
JavaScript - 定時事件
JavaScript - setTimeout()
JavaScript - setInterval()

JavaScript - Promise

什麼是 JavaScript 中的 Promise？

JavaScript Promise 是一個物件，表示非同步操作的完成或失敗。它使用回撥函式來管理非同步操作，提供更簡單的語法來更容易地處理此類操作。

可以使用 Promise() 建構函式建立一個 Promise 物件。Promise 建構函式接受一個回撥函式作為引數。回撥函式接受兩個函式 resolve() 和 reject() 作為引數。如果 Promise 成功返回，則呼叫 resolve 函式。如果任務失敗並返回原因，則呼叫 reject 函式。

讓我們瞭解如何在 JavaScript 中建立 Promise。

生成 Promise 程式碼

語法

按照以下語法使用 Promise() 建構函式建立 Promise。

let promise = new Promise(Callback); // Producing the code
OR
let promise = new Promise(function(resolve, reject){
   // Callback function body
});

Promise() 建構函式將回調函式作為引數。建立 Promise 也稱為“程式碼生成”。有時，您可以從諸如 fetch() 之類的方法中獲得返回的 Promise。

引數

Promise() 建構函式只接受一個引數。

回撥 - 這是一個用於實現 Promise 的回撥函式。

回撥函式接受兩個引數。

Resolve - 您可以使用 resolve() 函式從 Promise 返回成功的響應。
Reject - 您可以使用 reject() 函式拒絕 Promise 並從 Promise 返回錯誤。

Promise 的狀態

Promise 有 4 個狀態。

Promise.state	描述	Promise.result
已完成 (Fulfilled)	當 Promise 以成功的響應完成時。	結果資料
已拒絕 (Rejected)	當 Promise 失敗時。	一個錯誤物件
等待中 (Pending)	當 Promise 正在等待執行時。	未定義
已確定 (Settled)	當 Promise 成功完成或拒絕時。	結果資料或錯誤物件

“狀態”和“結果”是 Promise 物件的屬性。

JavaScript 的 Promise 使用者

在上一節中，我們討論瞭如何生成 Promise 程式碼。如果您在網頁上列印 Promise，它將顯示“[物件 Promise]”。

讓我們透過下面的示例學習它。

示例

在下面的程式碼中，我們使用了 Promise() 建構函式來定義 Promise 物件的例項。

在回撥函式中，如果變數“num”的值為 10，則我們解析 Promise。否則，我們拒絕 Promise。

您可以在輸出中觀察 promise1，它列印“[物件 Promise]”。

<html>
<body>
   <div id = "output">The promise1 object is:  </div>
   <script>
      var num = 10;
      const promise1 = new Promise((resolve, reject) => {
         if (num == 10) {
            resolve('The value of the number is 10 <br>');
         } else {
            reject('The value of the number is not 10 <br>');
         }
      });
      document.getElementById('output').innerHTML += promise1;
   </script>
</body>
</html>

輸出

The promise1 object is: [object Promise]

為了克服上面例子中的問題並從Promise中獲取結果資料，您需要使用Promise程式碼。

您可以使用以下方法來使用Promise物件處理Promise程式碼。

then() 方法
catch() 方法

讓我們學習如何使用這兩種方法來處理Promise程式碼。

JavaScript Promise then() 方法

您可以使用then()方法與Promise例項一起使用來處理其程式碼。使用Promise，您可以使用then()方法獲取結果資料或錯誤物件。

語法

您可以按照以下語法使用then()方法來處理Promise程式碼。

promise.then(successFunc, errorfunc);

在上述語法中，“promise”是Promise物件的例項。

引數

successFunc − 當Promise成功（fulfilled）時將執行的函式。
errorFunc − 當Promise失敗（rejected）時將執行的函式。

示例

下面的例子包含與上一個例子相同的程式碼。主要區別在於我們使用了then()方法來處理Promise的程式碼。

由於變數“num”的值為10，Promise將成功。我們將successFunc()和errorFunc()函式作為then()方法的引數傳遞。

在輸出中，您可以看到它執行了successFunc()函式，因為Promise成功了。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const num = 10;
      const promise1 = new Promise((resolve, reject) => {
         if (num == 10) {
            resolve('The value of the number is 10 <br>');
         } else {
            reject('The value of the number is not 10 <br>');
         }
      });
      promise1.then(successFunc, errorfunc);
      function successFunc(message) {
         document.getElementById('output').innerHTML += message;
      }
      function errorfunc(message) {
         document.getElementById('output').innerHTML += message;
      }
   </script>
</body>
</html>

輸出

The value of the number is 10

示例

在下面的程式碼中，如果變數“num”的值不等於20，我們將拒絕Promise。此外，我們使用setTImeOut()方法在2000毫秒延遲後拒絕Promise。

在輸出中，您可以看到then()方法執行了errorFunc()函式，因為Promise失敗了。

<html>
<body>
   <div id = "output"> </div>
   <script>
      var num = 10;
      let promise1 = new Promise((resolve, reject) => {
         if (num == 20) {
            resolve('The value of the number is 20 <br>');
         } else {
            setTimeout(() => {
               reject('The value of the number is not 20 <br>');
            }, 2000);
         }
      });
      output.innerHTML += "Wait for consuming the promise <br>";
      promise1.then(successFunc, errorfunc);
      function successFunc(message) {
         document.getElementById('output').innerHTML += message;
      }
      function errorfunc(message) {
         document.getElementById('output').innerHTML += "Error: " + message;
      }
   </script>
</body>
</html>

輸出

Wait for consuming the promise
Error: The value of the number is not 20

JavaScript Promise catch() 方法

Promise例項的catch()方法允許您捕獲錯誤。如果在Promise解決過程中發生任何錯誤，控制流將進入catch()方法。

語法

您可以按照以下語法使用catch()方法與Promise一起使用。

promise
   .then(successFunc)
   .catch(errorFunc);

我們在上面的語法中將then()和catch()方法與Promise一起使用。

您可以看到我們只將單個函式傳遞給then()方法。因此，它將處理成功響應，而catch()方法將處理錯誤響應。

引數

errorFunc − 當Promise失敗時將執行的errorFunc()回撥函式。

示例

在下面的程式碼中，我們使用Promise()物件建立了一個Promise，並拒絕了該Promise。

在使用Promise時，我們使用了then()和catch()方法。在輸出中，您可以看到控制流直接進入catch()方法，因為我們拒絕了Promise。

<html>
<body>
   <div id = "output"> </div>
   <script>
      var num = 10;
      const promise = new Promise((resolve, reject) => {
         reject("Promise is rejected!");
      });
      promise
      .then((message) => {
         output.innerHTML += message;
      })
      .catch((message) => {
         document.getElementById('output').innerHTML += "Inside the catch() method.<br>";
         document.getElementById('output').innerHTML += message;
      });
   </script>
</body>
</html>

輸出

Inside the catch() method.
Promise is rejected!

JavaScript Promise finally() 方法

Promise物件的finally()方法可以與Promise例項一起使用。當Promise成功或失敗時，finally()方法的程式碼總是會被執行。

語法

使用者可以按照以下語法使用finally()方法與Promise一起使用。

promise
   .then(successFunc)
   .catch(errorFunc)
   .finally(callback);

在上述語法中，我們使用了then()、catch()和finally()方法與Promise一起使用。

引數

Callback − 它是一個回撥函式，當Promise完成（settled）時總是會被執行。

示例

在下面的程式碼中，我們定義了Promise並將其成功處理。

此外，我們在使用Promise程式碼時使用了finally()方法。在輸出中，您可以看到JavaScript控制流首先進入then()方法，然後進入finally()方法。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById('demo');
      const num = 10;
      const promise = new Promise((resolve, reject) => {
         resolve("Promise is resolved successfully!");
      });
      promise
      .then((message) => {
         output.innerHTML += "Inside the then() method. <br>";
         output.innerHTML += message;
      })
      .catch((message) => {
         output.innerHTML += "Inside the catch() method.<br>";
         output.innerHTML += message;
      })
      .finally(() => {
         output.innerHTML += "<br>Inside the finally() method.";
      });
   </script>
</body>
</html>

輸出

Inside the then() method.
Promise is resolved successfully!
Inside the finally() method.

即使Promise失敗，finally()方法的回撥函式也會被執行。

JavaScript Promise 參考

JavaScript Promise 建構函式

您可以使用new關鍵字呼叫Promise()建構函式。

建構函式	描述
Promise()	用於建立Promise物件的例項。

JavaScript Promise 屬性

這裡，我們列出了Promise物件的屬性。

屬性	描述
constructor	獲取Promise物件例項的Promise建構函式。

JavaScript Promise 方法

靜態方法

靜態方法可以透過將“Promise”作為引用來呼叫。

方法	描述
all()	處理多個Promise。它接受Promise陣列作為引數。
allSettled()	當所有Promise都完成（settled）時獲取一個Promise。
any()	返回最早成功的單個Promise。
race()	從Promise的可迭代物件中獲取單個Promise。
reject()	使用原因拒絕Promise。
resolve()	使用資料或原因來成功處理Promise。

例項方法

例項方法可以透過將Promise物件的例項作為引用來呼叫。

方法	描述
catch()	處理錯誤。
then()	處理結果資料和錯誤。
finally()	當Promise完成（settled）（成功或失敗）時被呼叫。

列印頁面