JavaScript 中的 Promise 链是什么？-js教程-PHP中文网

首页

web前端

js教程

JavaScript 中的 Promise 链是什么？

王林

Sep 08, 2023 pm 03:45 PM

JavaScript 中的 Promise 链是什么？

在本教程中，我们将讨论 JavaScript 中的 Promise 链。在转向 Promise 链之前，我们先来谈谈什么是 Promise

因此，我们知道 JavaScript 是单线程的，这意味着不允许两个函数同时运行，因为我们只有一个调用堆栈，如下所示，它有一个要执行的函数

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

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

因此，我们对异步操作使用 Promise，它给出异步操作的结果及其完成或失败。

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

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

异步方法返回一个值，但它不返回最终值，而是返回一个将来为该函数提供值的承诺。

我们在 Promise 语句之后使用 then() 方法执行 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 id="Execute-a-Promise-we-receive"> 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 链基本上是多个异步函数调用，并以同步方式依次执行它们。 then() 方法。

示例 2

让我们通过一个例子来详细理解。

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in JavaScript </title>
</head>
<body>
   <h3 id="Promise-Chaining"> 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>

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

第一个最初的承诺得到了兑现。
然后 .then() 方法调用它创建了一个新的 Promise 并得到了解析。
再次调用 .then() 方法，它创建了一个新的 Promise，然后它也得到了解析。
同样，它正在工作，我们也可以添加另一个承诺处理程序。

所以，基本上 .then() 方法返回一个新的 Promise，并使用 .then() 调用 next 等等。

示例 3

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in javascript</title>
</head>
<body>
   <h3 id="Promise-Chaining"> 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>

因此，我们看到了有关其工作原理的从基础到承诺链的深入概念。

以上是JavaScript 中的 Promise 链是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

See all articles