Promise中的then链机制用法详解

Promise中的then链机制

由于每次调用 .then 方法都会返回一个新的 Promise 实例，因此可以实现连续的链式调用。

同时，由于新实例的创建方式存在差异，其状态判定的标准也随之不同。

• 第一类：通过 new Promise 构造的实例

• • 其状态由 executor 函数中执行的 resolve 或 reject 决定。
  • 具体表现为 executor 函数执行过程中是否发生错误。

• 第二类：由 .then 方法返回的新实例（无论执行的是 onfulfilled 还是 onrejected 回调）。

• • 首先检查返回值是否为新的 Promise 实例。若否，则仅判断执行过程是否报错：未报错时状态为成功，值为函数返回值；报错时状态为失败，值为失败原因。
  • 若返回的是新的 Promise 实例（记为 @p），则 @p 的状态直接决定 .then 返回实例的状态。若 @p 为成功状态，需对其值进行二次处理（若该值是另一个状态为失败的 Promise 实例，则以该新实例的状态为准）；若 @p 为失败状态，则直接认定为失败，无需再处理失败值。

• 第三类：

• • Promise.resolve(100) 返回一个状态为成功、值为 100 的新 Promise 实例。
  • Promise.reject(0) 返回一个状态为失败、值为 0 的新 Promise 实例。

只要明确了实例的状态和值，即可确定 .then(onfulfilled, onrejected) 中存放的两个方法哪一个会被执行。

then链的穿透性（顺延）

正常情况下，.then 方法接收两个函数 onfulfilled 和 onrejected。但在某些情况下，可能不传递其中一个函数，此时需采用“顺延策略”：查找下一个 .then 中对应状态的函数并执行。

例如：.then(null,onrejected) 或者 .then(onfulfilled);

.then中的异步

promise.then(onfulfilled, onrejected)

• 情况一：此时已明确 Promise 是成功还是失败。

• • 应执行 onfulfilled 或 onrejected，但并非立即执行，而是作为异步微任务处理。
  • 首先将执行对应方法的操作放入 WebAPI 监听，但由于状态已知且方法可执行，随即将其移至 EventQueue（异步微任务队列）等待执行。

• 情况二：此时 Promise 仍处于 pending 状态。

• • 先将 onfulfilled 或 onrejected 存储起来，只有当后续实例状态修改为成功/失败时，才取出之前存储的方法并执行【且此时执行仍为异步微任务】。
  • 仍需经历：WebAPI -> EventQueue 的过程。

catch

真实项目中，我们常在 .then 中仅传递 onfulfilled 以处理成功状态；在 then 链末尾设置一个 catch 以处理失败情况（依托于 then 链的穿透机制，无论最初还是哪个 .then 中出现导致状态为失败的情况，都会顺延至末尾的 catch 部分）。

Promise.all

//异步的“并行”：同时处理，相互之间互不影响
fn1().then(result => {
    console.log(result);
});
fn2().then(result => {
    console.log(result);
});
fn3().then(result => {
    console.log(result);
}); 

并行中的综合处理：同时发送多个请求（处理多个异步），但需等待所有异步都成功后，再执行整体操作。

let promise = Promise.all([promise1,promise2,...]);

• 执行 Promise.all 返回一个新的 Promise 实例 @p。
• 并传递一个数组，数组中包含多个其他 Promise 实例。
• 若数组中的每个 Promise 实例最终均为成功状态，则 @p 也为成功，其值也是一个数组，按“最初顺序”（不考虑谁先成功）依次存储各 Promise 实例的结果；若数组中某 Promise 实例失败（只要遇到一个失败，后续不再处理），则 @p 也为失败，值为当前实例的失败原因。
• 若数组中有一项并非 Promise 实例（例如：是个 100），则浏览器会默认将其转换为状态为成功、值为此项本身的 Promise 实例。

async

async 修饰符：用于修饰函数，使函数返回值成为 Promise 实例，从而可基于 THEN 链进行处理。

• 若函数本身返回一个 Promise 实例，则以该返回值为主。
• 若函数本身未返回 Promise，则会将返回值转换为一个 Promise 实例：状态 -> 成功，值 -> 返回值。
• 若函数执行报错，则返回的实例状态 -> 成功，值 -> 报错原因。

async 最主要的作用就是：若想在函数中使用 await，则当前函数必须基于 async 修饰。

await

等待，一般在其后放置 Promise 实例，它会等待实例状态为成功，再去执行“当前上下文” await 下面的代码【若 Promise 实例管控的是异步编程，其实是在等待异步执行成功，再执行下面代码，类似于将异步改为同步的效果】。

若其后放置的不是 Promise 实例，则浏览器默认会将其转换为“状态为成功、值就是这个值”的实例。

await 10; --> await Promise.resolve(10)；

以上就是 Promise 中的 then 链机制用法详解的详细内容，更多关于 Promise then 链机制的资料请关注本站其它相关文章！