前端promise理解

前端promise理解_第1张图片
前端promise理解_第2张图片
前端promise理解_第3张图片
promise
2.1promise是什么
抽象表达:是js中进行异步编程的新的解决方案
具体表达:从语法上看,promise是一个构造函数;从功能上看,promise队形用于封装一个异步操作,并可以获取其结果
2.2promise 状态
pending 变成resolved
pending 变成rejected
说明:只有这2种,且一个promise对象只能改变一次
无论变为成功还是失败,都会有一个结果数据
成功的结果数据一般称为value 失败的结果数据一般称为reason
前端promise理解_第4张图片前端promise理解_第5张图片
前端promise理解_第6张图片
promise优势
前端promise理解_第7张图片

前端promise理解_第8张图片前端promise理解_第9张图片
前端promise理解_第10张图片
前端promise理解_第11张图片

如何使用promise
前端promise理解_第12张图片前端promise理解_第13张图片

前端promise理解_第14张图片
前端promise理解_第15张图片前端promise理解_第16张图片
前端promise理解_第17张图片前端promise理解_第18张图片
race()看谁先完成
前端promise理解_第19张图片
promise 小问题
前端promise理解_第20张图片前端promise理解_第21张图片
前端promise理解_第22张图片先回调再改变状态
前端promise理解_第23张图片先改状态后指定回调函数
前端promise理解_第24张图片前端promise理解_第25张图片promise 不论失败还是成功的回调函数都是异步执行

前端promise理解_第26张图片没有写return 的话 第二个then返回undefined
在这里插入图片描述
前端promise理解_第27张图片串联多个操作:异步不能像蓝色这样写不对,得通过new promise
前端promise理解_第28张图片前端promise理解_第29张图片

前端promise理解_第30张图片
传透是一层一层传过来
前端promise理解_第31张图片
前端promise理解_第32张图片
让then不执行
前端promise理解_第33张图片

手写promise
1.定义整体结构
前端promise理解_第34张图片promise中的resolve
前端promise理解_第35张图片前端promise理解_第36张图片注意:回调函数需要异步执行,所以需要放入setTimeout中;
且状态只能改变一次
前端promise理解_第37张图片reject

前端promise理解_第38张图片
执行器抛出异常,promise要变为失败状态
前端promise理解_第39张图片
then方法实现:需要判断状态,依次考虑;注意this指定问题
前端promise理解_第40张图片then的简单实现
前端promise理解_第41张图片
前端promise理解_第42张图片
返回一个新的promise对象,需要判断回调函数的值
前端promise理解_第43张图片前端promise理解_第44张图片返回一个promise,return的promise结果就是这个promise结果
前端promise理解_第45张图片简写形式,注意div.οnclick=fn 如果带括号会立刻执行
前端promise理解_第46张图片简写形式为:
前端promise理解_第47张图片如果是rejected状态
前端promise理解_第48张图片重构代码
定义指定回调函数处理

前端promise理解_第49张图片最终版then方法
throw左边不能有return
前端promise理解_第50张图片实现异常传透的关键一步

前端promise理解_第51张图片在这里插入图片描述catch()

在这里插入图片描述
then 函数总结
前端promise理解_第52张图片resolve 和reject 实现
原生resolve返回
在这里插入图片描述前端promise理解_第53张图片
指定数组长度 new Array(promise.length),要判断是不是成功,成功的话将所有成功的value输出

前端promise理解_第54张图片前端promise理解_第55张图片promise输出顺序与all后面顺序有关,和声明顺序无关;所以以下输出 5 2 3
前端promise理解_第56张图片race问题:尽管是遍历,但只会改变一次,因为第一次的时候已经从pending状态变为rejected或者resolved。所以之后就不会发生改变。
前端promise理解_第57张图片race 是看谁最先完成。也可以直接传一个数字,以下结果因为p4是1秒之后执行,所以输出7
前端promise理解_第58张图片处理传入非promise对象,将参数放入 promise.resolve§中
前端promise理解_第59张图片延迟返回一个promise对象
前端promise理解_第60张图片类中如下图的方法就定义在原型上
前端promise理解_第61张图片类中如下图的方法给类对象添加
前端promise理解_第62张图片async和await
前端promise理解_第63张图片加上async的函数返回值是promise对象
前端promise理解_第64张图片

前端promise理解_第65张图片
前端promise理解_第66张图片
用了await必须用async
在这里插入图片描述

前端promise理解_第67张图片

前端promise理解_第68张图片try catch得到失败的结果

前端promise理解_第69张图片
js异步之宏队列与微队列
主要有三大部分:js引擎 队列 管理模块
js引擎:堆中放对象,栈中放函数
队列分为宏队列和微队列
宏队列:dom ajax 定时器回调
微队列:promise
前端promise理解_第70张图片执行先后问题:微队列先执行
前端promise理解_第71张图片
js执行过程:先执行完所有同步代码,再执行队列中的代码。优先执行微队列的回调函数

在这里插入图片描述前端promise理解_第72张图片
说明
前端promise理解_第73张图片前端promise理解_第74张图片注意最后一句话 每次准备取出第一个宏任务之前都需要将所有的微任务一个一个取出执行

面试题
输出: 3 2 4 1
前端promise理解_第75张图片输出:2 5 3 4 1
then执行,既要有函数 又要改变状态
微队列【3】因为后面的then没有状态改变,所以4并没有放入微队列中
此时宏队列的值为【1】
同步任务执行后,开始取微队列任务执行,3输出,状态改变,【4】放入微队列中
执行 微队列任务 输出4
执行宏队列任务输出 1
在这里插入图片描述
输出:3 7 4 1 2 5
宏队列 【5】
resolve(1)执行,将p的状态改变为resolved。然后resolve(2)执行,改变外面first的状态 然后会将p.then放入微队列中
微队列 【1,2】
注意 resolve(6)不会有效果
因为已经状态改变了
前端promise理解_第76张图片前端promise理解_第77张图片

输出:1 7 2 8 4 6 5 0

宏【0】
.then(()=>)里面的内容会放到微队列中;下面的.then()不会放到微队列中因为上面的函数还没有执行,不知道状态的改变。下面new promise中同步输出7,执行resolve(),将then()函数中的内容放入微队列中。
微队列【2,8】

取出输出2的回调函数,接着又new了一个promise先输出3,执行resolve,并将输出为4的回调函数放入队列
微队列 【8,4】
4还没有执行,所以5的回调函数不会放入队列中。但6中的状态发生了改变,所以需要把6放入到队列中
微队列 【8 4 6】
取出微队列 8 执行,输出8
取出微队列4 执行,输出4,并将5放入微队列中
微队列【6 5】
取出6执行,输出6
取出5执行,输出5
取出0执行,输出0
前端promise理解_第78张图片前端promise理解_第79张图片

你可能感兴趣的