JavaScript 中的 Promise 链是什么？

在本教程中，我们将讨论 JavaScript 中的 Promise 链。在进入 Promise 链之前，让我们先谈谈什么是 Promise。

因此，正如我们所知，JavaScript 是单线程的，这意味着不允许两个函数同时运行，因为我们只有一个像下面这样的调用栈，其中包含要执行的函数。

当一个函数完成执行后，另一个函数开始执行，所以为了实现两个或多个函数同时运行，我们在 JavaScript 中使用异步编程，例如 setTimeout 函数，它接受一个回调函数和一个指定时间，之后它将执行该函数。

setTimeout(function cT(){
   console.log("I am here after 5 seconds")
}, 5000);

因此，我们使用 Promise 来进行异步操作，它在异步操作完成或失败时提供结果。

就像在现实生活中，我们对任何工作的完成做出承诺，以同样的方式，它也做出了承诺，并且它存在于三种状态之一。

  • 等待中 - 这表示初始状态，表示它既未完成也未被拒绝。
  • 已完成 - 这表示我们分配的操作已成功完成。
  • 已拒绝 - 此状态表示操作无法执行，它已被拒绝。

异步方法返回一个值，它不返回最终值，而是返回一个 Promise，以便将来向函数提供值。

我们使用 then() 方法在 Promise 语句之后执行 Promise，如果由于某些错误而被拒绝，则使用 catch 块进行处理。

如何在 JavaScript 中声明一个 Promise？

let promise = new Promise(function (resolve, reject) {
   return resolve("Hello I am resolved");
});

这里 Promise 内部有一个函数，称为回调函数，它有两个参数作为两个方法 resolve() 和 reject()，正如我们从上面关于两者的解释中已经了解到的那样。

因此，这里的 resolve 确保我们给定的函数成功完成，而 reject 将确保其对给定可执行回调函数不成功完成的责任。

示例 1

让我们看看使用 Set 查找字符串唯一字符的程序。

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in JavaScript</title>
</head>
<body>
   <h3> Execute a Promise we receive</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve("Hello I am resolved");
      });
      promise.then(function(value) {
         console.log(value);
         document.getElementById("result").innerHTML += value;
      })
   </script>
</body>
</html>

在上面的 then() 方法内部传递了一个回调函数，变量 value 负责打印来自 resolve() 方法的结果。

什么是 Promise 链？

Promise 链基本上是一系列异步函数调用，并使用 .then() 方法一个接一个地以同步方式执行它们。

示例 2

让我们使用一个示例详细了解一下。

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in JavaScript </title>
</head>
<body>
   <h3> Promise Chaining</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve(10);
      });
      promise.then(function(firstPromise_val) {
         alert(firstPromise_val)
         document.getElementById("result").innerHTML += "First Promise val: "+firstPromise_val+"<br>";
         return firstPromise_val+10;
      }).
      then(function(secondPromise_val){
         alert(secondPromise_val)
         document.getElementById("result").innerHTML +="Second Promise val: "+ secondPromise_val+"<br>";
         return secondPromise_val+10;
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         document.getElementById("result").innerHTML +="Third Promise val: "+thirdpromise_val+"<br>";
         return thirdpromise_val+10;
      })
   </script>
</body>
</html>

让我们了解 Promise 链是如何工作的。

  • 首先，初始 Promise 已完成。
  • 然后调用 .then() 方法，它创建了一个新的 Promise，并且它已完成。
  • 再次调用 .then() 方法，它创建了一个新的 Promise，然后它也已完成。
  • 类似地，它正在工作，我们还可以添加另一个 Promise 处理程序。

因此，基本上 .then() 方法返回一个新的 Promise，并使用 .then() 等依次调用下一个。

示例 3

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in javascript</title>
</head>
<body>
   <h3> Promise Chaining</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve("My");
      }).
      then(function(firstPromise_val) {
         alert(firstPromise_val)
         return firstPromise_val+" Name";
      }).
      then(function(secondPromise_val){
         alert(secondPromise_val)
         return secondPromise_val+" is";
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         return thirdpromise_val+" Kalyan";
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         document.getElementById("result").innerHTML = thirdpromise_val
      })
   </script>
</body>
</html>

因此，我们从基础到 Promise 链深入了解了其工作原理的概念。

更新于： 2022年8月16日

1K+ 阅读量

启动你的 职业生涯

通过完成课程获得认证

开始
广告