JavaScript 里的 Promise Chaining

简介: Promise 通常被定义为最终将可用的值的代理(proxy)。

Promise 通常被定义为最终将可用的值的代理(proxy)。


问题背景


回调:我们有一系列异步任务要一个接一个地执行——例如,加载脚本。 我们怎样才能很好地编码呢?

Promise 提供了一些方法来做到这一点:Promise 链。


它看起来像这样:


new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
  alert(result); // 1
  return result * 2;
}).then(function(result) { // (***)
  alert(result); // 2
  return result * 2;
}).then(function(result) {
  alert(result); // 4
  return result * 2;
});


这个思路是结果通过 .then 处理程序链传递。


其流程是:


  • 初始 promise 在 1 秒内 resolve (*)

  • 然后调用 .then 处理程序,then 方法返回一个新创建的 Promise(以 2 值解析)。

  • 下一个 then 获取前一个的结果,对其进行处理(加倍)并将其传递给下一个处理程序。
  • 以此类推。


切记,每次调用 .then 都会返回一个新的 Promise,这样我们就可以调用下一个 .then 了。


当处理程序返回一个值时,它成为该 Promise 的结果,因此下一个 .then 被调用。


初学者经常犯的错误,对同一个 promise 对象反复调用 then 方法。这并不是 Promise 的链式调用。



let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000);
});
promise.then(function(result) {
  alert(result); // 1
  return result * 2;
});
promise.then(function(result) {
  alert(result); // 1
  return result * 2;
});
promise.then(function(result) {
  alert(result); // 1
  return result * 2;
});


我们在这里所做的只是对一个 Promise 的几个处理程序。 他们不会将结果传递给对方; 相反,他们独立处理它。




所有 .then 在同一个 Promise 上得到相同的结果——那个 Promise 的结果。 所以在上面的代码中所有 alert 显示相同值:1。


在实践中,我们很少需要多个处理程序来处理一个 Promise。 chaining 调用的使用频率更高。

相关文章
|
4天前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
16 1
|
4天前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
26 4
|
4天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
4天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
2天前
|
前端开发 JavaScript
前端 js 经典:Promise
前端 js 经典:Promise
9 1
|
4天前
|
前端开发 JavaScript
在JavaScript中,回调函数、Promise和async/await这三种异步处理机制的优缺点
JavaScript的异步处理包括回调函数、Promise和async/await。回调函数简单易懂,但可能导致回调地狱和错误处理困难。Promise通过链式调用改善了这一情况,但仍有回调函数需求和学习成本。async/await提供同步风格代码,增强可读性和错误处理,但需ES8支持,不适用于并发执行。根据项目需求选择合适机制。
|
4天前
|
前端开发 JavaScript
js开发:请解释Promise是什么,以及它如何解决回调地狱(callback hell)问题。
Promise是JavaScript解决异步操作回调地狱的工具,代表未来可能完成的值。传统的回调函数嵌套导致代码难以维护,而Promise通过链式调用`.then()`和`.catch()`使异步流程清晰扁平。每个异步操作封装为Promise,成功时`.then()`传递结果,出错时`.catch()`捕获异常。ES6的`async/await`进一步简化Promise的使用,使异步代码更接近同步风格。
22 1
|
4天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
4天前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
22 8
|
11月前
|
前端开发 JavaScript
【JavaScript】Promise(零) —— 准备工作(实例对象、函数对象、回调函数分类、捕获抛出错误)
【JavaScript】Promise(零) —— 准备工作(实例对象、函数对象、回调函数分类、捕获抛出错误)