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

js 复制代码
//异步的"并行":同时处理,相互之间互不影响
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);

相关推荐
qiyi.sky3 分钟前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~7 分钟前
分析JS Crash(进程崩溃)
java·前端·javascript
安冬的码畜日常16 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n043 分钟前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
昨天;明天。今天。1 小时前
案例-任务清单
前端·javascript·css
zqx_72 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己2 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称3 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色3 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2343 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js