Promise中的then链机制

Promise中的then链机制

因为每一次 .then都会返回一个新的promise实例，所以我们就可以持续 .then下去了

而且因为实例诞生的方式不同，所以状态判断标准也不同

• 第一类：new Promise出来的实例
• • 执行的是：resolve还是reject决定状态
  • executor函数执行是否报错
• 第二类：.then返回的新实例 （不论执行的是onfulfilled还是onrejected）
• • 首先看返回值是否为新的promise实例，如果不是，则只看执行是否报错（不报错状态就是成功，值就是函数返回值；报错则状态就是失败，值就是失败原因）
  • 如果返回的是新promise实例（@p），这样@p这个promise实例是成功还是失败，直接决定了.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
• 并且传递一个数组，数组中包含n多其他的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)；

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！