深入理解 JavaScript Promise 链式调用机制

JavaScript Promise 链式调用机制

现代 JavaScript 标准中引入了原生的 Promise 对象。

本文仅聚焦于 Promise 的链式使用场景，深入探讨其内部运作细节。

then() 与 catch() 基础回顾

一、then() 与 catch() 基础回顾

then() 和 catch() 方法接受回调函数作为参数，用于接收 Promise 的最终结果。

当 then() 仅接收一个参数时，该回调函数仅在 Promise 状态变为 resolve 时被调用。

当 then() 接收两个参数时，第二个回调函数用于处理 Promise 状态变为 reject 的情况。

catch() 方法专门用于处理 Promise 状态为 reject 的情况。

由此可见，then() 可以兼顾 resolve 和 reject 的处理，而 catch() 仅处理 reject。尽管功能上存在重叠，但最佳实践建议：使用 then() 处理 resolve，使用 catch() 处理 reject。

then() 与 catch() 的返回值及链式调用细节

二、then() 与 catch() 的返回值及链式调用细节

前文仅复习了基本用法，本文将重点讲解 then() 和 catch() 的返回值特性及其在链式调用中的具体表现。官方文档指出，then() 和 catch() 都会返回一个新的 Promise 对象，这一特性值得深入探究（注：作者为 JavaScript 初学者，未接触过早期的第三方 Promise 实现）。

首先，这个新返回的 Promise 并非原来的 Promise 实例。

其次，新返回 Promise 的状态变化（即最终是 resolve 还是 reject）取决于上一个 Promise 的状态以及 then() 方法的具体使用方式。

以下先说明 then() 的情况（catch() 逻辑类似）：

var p1 = Promise.resolve("Success");
var p2 = p1.then(task1);
var p3 = p2.then(task2);

注：上述代码中的 task1 和 task2 均为回调函数。

在此示例中，p1 是一个被创建并直接 resolve() 的 Promise。

p2 是通过 p1 调用 then() 得到的 Promise，p3 则是通过 p2 调用 then() 得到的 Promise。

那么，p2 和 p3 的状态将如何改变呢？

为了清晰阐述这一概念，我们借助图示进行讲解：

图中包含以下元素：

1. 八边形代表一个 Promise 对象。

2. 圆形代表 Promise 内部的状态，黑色箭头表示状态的变化过程。

3. 向右的箭头代表调用 then 函数。

4. 这意味着，只要调用 then 函数，就会生成一个新的 Promise 对象。

5. 在调用 then 函数时，前一个 Promise 对象的状态（pending 还是已 settled）是不确定的，且从外部无法直接观测。

6. then 函数的调用是非阻塞的，因此 p2 和 p3 几乎瞬间生成，即使 p1 仍在缓慢地迁移其自身状态。

已知 p1 的状态已被 resolve（参考上述代码），但 p2 和 p3 的具体状态（resolve 或 reject）尚未明确，请看下面的新图示。

图中新增了菱形元素。

菱形代表调用 then 时传入的回调函数。向上的菱形表示传入了针对前一个 Promise 对象被 resolve 的处理逻辑，向下的菱形表示传入了针对前一个 Promise 对象被 reject 的处理逻辑。

注意：本例中并未传入针对 reject 的处理逻辑，因此图中不应画出向下的菱形。此处画出是为了示意，上下菱形仅与我们具体如何使用 then 或 catch 相关。再参考示例代码：

var p1 = Promise.resolve("Success");var p2 = p1.then(task1);//产生了向上的菱形var p3 = p2.then(task2);//产生了向上的菱形

可以看出，then 的第二个参数并未提供，即我们未处理 reject 的情况。

补充说明：若需处理 reject，既可以使用 then 的第二个参数，也可以使用 catch。除了语义上的区别，catch 与 then 在功能上无其他差异。

1. 如果 p1 的最终状态（resolve 或 reject）得到了正确处理（即调用 then 时传入了对应的回调函数，图中体现为有对应的菱形），那么 p2 的状态将转为 resolve。

2. 如果 p1 的最终状态（resolve 或 reject）未被正确处理（即调用 then 时缺少对应的回调函数，图中体现为没有对应的菱形），那么 p1 的状态将直接路由到 p2（p2 继承 p1 的状态）。

3. 这种状态传递机制会如此继续下去。

4. 本文不讲解如何在回调函数中获取前一个 Promise 的最终数据，即数据传递机制，这部分内容在许多教程中已有详细阐述。

实例总结

三、实例总结

以下给出一些示例来总结本文观点。图中 P1 的状态是预设的（resolve 或 reject，由用户指定），目的是推导 P2 和 P3 的最终状态。

以上四个为独立示例，彼此之间无关联。

X 代表 P3 未使用 then 或 catch 函数，因此不存在针对 resolve 或 reject 的处理逻辑。

最后，若有错误，请及时指正，多谢！~！！@~~~

以上这篇深入理解js promise chain就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。