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）（成功或失败）时被调用。

打印页面