JavaScript - Promise

JavaScript 中的 Promise 是什么?

JavaScript Promise 是一个表示异步操作完成或失败的对象。它使用回调函数来管理异步操作，从而提供更简单的语法来更轻松地处理此类操作。

可以使用 Promise() 构造函数创建 Promise 对象。Promise 构造函数以回调函数作为参数。回调函数接受两个函数:resolve() 和 reject() 作为参数。如果 Promise 成功返回，则会调用 resolve 函数。当任务失败并返回原因时，会调用拒绝函数。

让我们了解如何在 JavaScript 中创建 Promise。

生成 Promise 代码

语法

按照以下语法使用 Promise() 构造函数创建 Promise。

let promise = new Promise(Callback); // 生成代码
或
let promise = new Promise(function(resolve, reject){
// 回调函数体
});

Promise() 构造函数将回调函数作为参数。创建 Promise 也称为代码生成。有时，您会通过 fetch() 等方法获得 Promise。

参数

Promise() 构造函数仅接受一个参数。

• Callback − 它是一个用于实现 Promise 的回调函数。

回调函数接受两个参数。

• Resolve − 您可以使用 resolve() 函数从 Promise 返回成功响应。
• Reject − 您可以使用 rejection() 函数拒绝 Promise 并从 Promise 返回错误。

Promise 的状态

Promise 有 4 种状态。

状态 (state) 和结果 (result) 是 Promise 对象的属性。

JavaScript 的 Promise 使用者

在上一节中，我们讨论了如何生成 Promise 代码。如果您在网页上打印该 Promise，它将显示 [Object Promise]。

让我们通过下面的示例来学习。

示例

在下面的代码中，我们使用了 Promise() 构造函数来定义 Promise 对象的实例。

在回调函数中，如果 num 变量的值为 10，我们就解析该 Promise。否则，我们就拒绝该 Promise。

您可以在输出中观察 promise1，它打印的是 [Object 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 满足条件时执行的函数。
• errorFunc − 它是一个在 Promise 拒绝条件时执行的函数。

示例

以下示例包含与上一个示例相同的代码。主要区别在于我们使用了 then() 方法来执行 Promise 的代码。

由于 num 变量的值为 10，因此 Promise 将被履行。我们将 successFunc() 和 errorfunc() 函数作为 then() 方法的参数传递。

在输出中，您可以观察到它在 Promise 履行时执行了 successFunc() 函数。

<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() 方法在 Promise 被拒绝时执行了 errorfunc() 函数。

<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);

在上述语法中，我们结合 promise 使用了 then() 和 catch() 方法。

您可以看到，我们只向 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 对象的实例一起使用。finally() 方法的代码始终会在 Promise 状态为 fulfilled 时执行。

语法

用户可以按照以下语法将 finally() 方法与 Promise 一起使用。

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

在上述语法中，我们结合 Promise 使用了 then()、catch() 和 finally() 方法。

参数

回调函数 − 它是一个回调函数，在 Promise 执行完毕后总会执行。

示例

在下面的代码中，我们定义了 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() 构造函数。

JavaScript Promise 属性

这里列出了 Promise 对象的属性。

JavaScript Promise 方法

静态方法

可以通过引用 Promise 来调用静态方法。

实例方法

可以通过将 Promise 对象的实例作为引用来调用实例方法。