3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）
lin-lins 2024-07-08 12:03:03 阅读 99
前端异步编程规范
Promise介绍手写Promise（resolve，reject）手写Promise（then）Promise相关 API实现allraceallSettledany
async/await和Promise的关系async/await的使用
Promise介绍
Promise是一个类，可以翻译为承诺、期约
Promise 就像一个容器，里面存放着未来才会结束，返回结果的容器，返回的结果只需要在出口处接收就好了。从语法上讲，Promise
是一个对象，从它可以获取异步操作的消息。
当通过new创建Promise实例时，需要传入一个回调函数，我们称之为executor
这个回调函数会被立刻执行，并传入两个回调参数resolve、reject当调用resolve回调函数时，会执行 Promise 对象的then()第一个方法传入的回调当调用reject回调函数时，会执行 Promise 对象的then()第二个方法或catch方法传入的回调
Promise是一个状态机，分为 3 种状态：
pending：待定状态，执行了 executor 后，处于该状态fulfilled：兑现（成功）状态，调用resolve()后，Promise 的状态更改为 fullfilled，且无法再次更改rejected：拒绝状态，调用reject()后，Promise 的状态更改为 rejected，且无法再次更改
Promise 的状态，只可能是其中一种状态，从进行中变为成功或失败状态之后，状态就固定了，不会再发生改变。
<code> const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('error message')
},1000)
}).then(res=>{
console.log(res)//不执行
},err1=>{
console.log('err1',err1)//1秒后打印 err1 error message 不会打印err2 error message 先被then的err1输出结果
}).catch(err2=>{
console.log('err2',err2)//如果没有err1 1秒后打印err2 error message
})
手写Promise（resolve，reject）
Promise使用：
从Promise的使用上看，整理一下思路：Promise有三种状态。pending，fulfilled，rejected，且
执行了resolve，Promise状态会变成fulfilled；执行了reject，Promise状态会变成rejected；Promise状态不可逆，第一次成功就永久为fulfilled，第一次失败就永远状态为rejected；只会执行resolve或reject其中一个Promise中有throw的话，就相当于执行了reject；
先来实现1和2
构建 Promise 对象时，需要传入一个 executor 函数，Promise 的主要业务流程都在 executor 函数中执行。如果运行在 excutor 函数中的业务执行成功了，会调用 resolve 函数；如果执行失败了，则调用 reject 函数。
<code>class MyPromise{
constructor(executor){
this.initValue()
//执行传进来的执行函数
// let executor =(resolve,reject)=>{
// setTimeout(()=>{
// reject('error message')
// },1000)
// }
// executor()
executor(this.resolve,this.reject)//resolve，reject
}
//先创建Promise初始化
initValue(){
this.PromiseState='pending'//Promise的状态code>
this.PromiseResult=null//Promise的输出结果
}
resolve(value){
console.log('resolve')
this.PromiseState='fulfilled'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是window，code>
this.PromiseResult=value//Promise的输出结果
}
reject(value){
console.log('reject')
this.PromiseState='rejected'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是windowcode>
this.PromiseResult=value//Promise的输出结果
}
}
let p1 = new MyPromise((resolve, reject) => {
// console.log('MyPromise',this)//此时的this是window
resolve('success')//如果没有改变resolve函数内部的this指向，内部的this是没有PromiseState和PromiseResult属性的
// reject('fail')
})
console.log('p1', p1)
报错，resolve和reject内部的this是undefined,此时的resolve和reject在p1的原型对象上，如图
new的时候只会把构造函数里的类属性指向实例，类原型对象上方法不会指向实例
p1.resolve()可以调用，但是我们使用是resolve()，没有调用者。所以我们需要改变resolve函数的this指向，让resolve函数指向实例，才能访问实例上的属性（原型对象不能指回实例，原型对象和实例是1对多的关系，不清楚原型和实例关系的可以去本专栏的第一篇）
改变resolve函数的this指向,有三种方式call,apply,bind（详细可以看专栏第二篇）,我们采用bind（只改变函数指向，先不执行）
<code>class MyPromise{
constructor(executor){
this.initValue()
this.initBind()
//执行传进来的执行函数
executor(this.resolve,this.reject)//resolve，reject
// let executor =(resolve,reject)=>{
// setTimeout(()=>{
// reject('error message')
// },1000)
// }
// executor()
}
// 先创建Promise初始化
initValue(){
this.PromiseState='pending'//Promise的状态code>
this.PromiseResult=null//Promise的输出结果
}
//绑定this指向
initBind(){
//console.log('未绑定的this',this)//没有改变resolve和reject的this指向，此时resolve和reject函数是在class上，也就是实例的原型上
this.resolve = this.resolve.bind(this)//对class上的resolve函数，改变this指向，指向实例。this是实例，resolve不在实例上，实例上找不到，顺着在实例的原型上找
//等价于 this.resolve =this.__proto__.resolve.bind(this) ，在实例上创建一个函数，函数赋值原型上的函数resolve，此时函数内部的this指向是实例
this.reject = this.reject.bind(this)
console.log('绑定后的this',this)
}
resolve(value){
console.log('resolve')
this.PromiseState='fulfilled'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是window，code>
//所以需要将resolve的this指向指向PromiseState的同一个实例，构造函数里的属性会挂在new出来的实例，也就是，要指向p1
this.PromiseResult=value//Promise的输出结果
}
reject(value){
console.log('reject')
this.PromiseState='rejected'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是windowcode>
this.PromiseResult=value//Promise的输出结果
}
}
let p1 = new MyPromise((resolve, reject) => {
console.log('MyPromise',this)//此时的this是window
resolve('success')//resolve的调用者是window，如果没有改变resolve函数内部的this指向，内部的this是没有PromiseState和PromiseResult属性的
reject('fail')
})
console.log('p1', p1)
绑定后，实例上不仅有俩个属性，还多了俩个方法
最后处理一下
3. Promise状态不可逆，第一次成功就永久为fulfilled，第一次失败就永远状态为rejected；只会执行resolve或reject其中一个
4. Promise中有throw的话，就相当于执行了reject；
在resolve、reject中添加判断，当状态不是pending时，说明被改变过，执行过resolve或reject
if(this.PromiseState!='pending'){
return
}
this.PromiseState='fulfilled'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是window，code>
//所以需要将resolve的this指向指向PromiseState的同一个实例，构造函数里的属性会挂在new出来的实例，也就是，要指向p1
this.PromiseResult=value//Promise的输出结果
}
reject(value){
if(this.PromiseState!='pending'){
return
}
this.PromiseState='rejected'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是windowcode>
this.PromiseResult=value//Promise的输出结果
}
Promise中有throw的话，就相当于执行了reject。这就要使用try catch了
try {
// 执行传进来的函数
executor(this.resolve, this.reject)
} catch (e) {
// 捕捉到错误直接执行reject
this.reject(e)
}
手写Promise（then）
then的使用
// 马上输出 ”success“
const p1 = new Promise((resolve, reject) => {
resolve('success')
}).then(res => console.log(res), err => console.log(err))
// 1秒后输出 ”fail“
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail')
}, 1000)
}).then(res => console.log(res), err => console.log(err))
// 链式调用 输出 200
const p3 = new Promise((resolve, reject) => {
resolve(100)
}).then(res => 2 * res, err => console.log(err))
.then(res => console.log(res), err => console.log(err))
根据上述代码可以确定：
then接收两个回调，一个是成功回调，一个是失败回调；当Promise状态为fulfilled执行成功回调，为rejected执行失败回调；如resolve或reject在定时器里，则定时器结束后再执行then；then支持链式调用，下一次then执行受上一次then返回值的影响；
实现1和2
then(onFulfilled, onRejected) {
// 接收两个回调 onFulfilled, onRejected
// 参数校验，确保一定是函数
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
if (this.PromiseState === 'fulfilled') {
// 如果当前为成功状态，执行第一个回调
onFulfilled(this.PromiseResult)
} else if (this.PromiseState === 'rejected') {
// 如果当前为失败状态，执行第二哥回调
onRejected(this.PromiseResult)
}
}
完整代码为
class MyPromise {
// 构造方法
constructor(executor) {
// 初始化值
this.initValue()
// 初始化this指向
this.initBind()
try {
// 执行传进来的函数
executor(this.resolve, this.reject)
} catch (e) {
// 捕捉到错误直接执行reject
this.reject(e)
}
}
initBind() {
// 初始化this
this.resolve = this.resolve.bind(this)
this.reject = this.reject.bind(this)
}
initValue() {
// 初始化值
this.PromiseResult = null // 终值
this.PromiseState = 'pending' // 状态
}
resolve(value) {
// state是不可变的
if (this.PromiseState !== 'pending') return
// 如果执行resolve，状态变为fulfilled
this.PromiseState = 'fulfilled'
// 终值为传进来的值
this.PromiseResult = value
}
reject(reason) {
// state是不可变的
if (this.PromiseState !== 'pending') return
// 如果执行reject，状态变为rejected
this.PromiseState = 'rejected'
// 终值为传进来的reason
this.PromiseResult = reason
}
then(onFulfilled, onRejected) {
// 接收两个回调 onFulfilled, onRejected
// 参数校验，确保一定是函数
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
if (this.PromiseState === 'fulfilled') {
// 如果当前为成功状态，执行第一个回调
onFulfilled(this.PromiseResult)
} else if (this.PromiseState === 'rejected') {
// 如果当前为失败状态，执行第二哥回调
onRejected(this.PromiseResult)
}
}
}
测试：
// 输出 ”success“
const test = new MyPromise((resolve, reject) => {
resolve('success')
}).then(res => console.log(res), err => console.log(err))
实现第3点：如resolve或reject在定时器里，则定时器结束后再执行then；
这里先明白一个概念，
const test = new MyPromise((resolve, reject) => {
resolve('success')
}).then(res => console.log(res), err => console.log(err))
resolve .then调用函数是同步的，即MyPromise创建，马上执行resolve改变状态，马上执行then里的判断状态，状态是成功，走成功分支，状态是失败走失败分支
当resolve外层套一个定时器（resolve还未执行），同步进入then的时候，状态还没改变，是pending。then函数就没有反馈。
为了解决这个问题，我们需要在then里对状态为pending的时候处理，存储onFulfilled和onRejected
Promise A规范里 存在多次then调用情况
当 Promise 成功执⾏时，所有 onFulfilled 需按照其注册顺序依次回调。当 Promise 被拒绝执⾏时，所有的onRejected需按照其注册顺序依次回调。
具体Promise/A+规范，可以看http://malcolmyu.github.io/malnote/2015/06/12/Promises-A-Plus/，或者我的3.2、理解Promise/A+规范
意味着：我们可以多次调用，可以const p=promise，p.then()，p.then()，p.then()
因为同一个实例可能存在多次then调用，多个成功回调，多个失败回调，所以我们需要用队列存储。当resolve或者reject执行的时候，依次执行存储的成功队列或失败队列。一个实例只会promise只会执行resolve或reject里的一个，成功，则每个then都是执行成功，失败，则每个then都是执行失败。
另外：链式调用的时候promise.then().then().then()，每个then都返回的promise实例对象（下面详细讲）。对第三个then来说，他的调用者是p2=promise.then().then()，p2执行resolve或者reject之后，结果返回第三个then的onFulfilled或onRejected。也就是说单个链式调用里的then都是一个成功函数，一个失败函数。用回调队列来存储函数，不是因为链式调用的多个then。
实现：
<code>class MyPromise{
constructor(executor){
this.initValue()
this.initBind()
try {
//执行传进来的执行函数
executor(this.resolve,this.reject)//resolve，reject
// let executor =(resolve,reject)=>{
// setTimeout(()=>{
// reject('error message')
// },1000)
// }
// executor()
} catch (e) {
// 捕捉到错误直接执行reject
this.reject(e)
}
}
// 先创建Promise初始化
initValue(){
this.PromiseState='pending'//Promise的状态code>
this.PromiseResult=null//Promise的输出结果
this.onFulfilledCallbacks=[]//成功回调
this.onRejectedCallbacks=[]//失败回调
}
//绑定this指向
initBind(){
//console.log('未绑定的this',this)//没有改变resolve和reject的this指向，此时resolve和reject函数是在class上，也就是实例的原型上
this.resolve = this.resolve.bind(this)//对class上的resolve函数，改变this指向，指向实例。this是实例，resolve不在实例上，实例上找不到，顺着在实例的原型上找
//等价于 this.resolve =this.__proto__.resolve.bind(this) ，在实例上创建一个函数，函数赋值原型上的函数resolve，此时函数内部的this指向是实例
this.reject = this.reject.bind(this)
// console.log('绑定后的this',this)
}
resolve(value){
if(this.PromiseState!='pending'){
return
}
this.PromiseState='fulfilled'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是window，code>
//所以需要将resolve的this指向指向PromiseState的同一个实例，构造函数里的属性会挂在new出来的实例，也就是，要指向p1
this.PromiseResult=value//Promise的输出结果
//执行resolve改变状态后，当成功回调里有值时，执行，注意先进先出
while(this.onFulfilledCallbacks.length){
this.onFulfilledCallbacks.shift()(this.PromiseResult)//shift()获取数组第一个元素，且改变原数组
//获取的第一个元素是一个函数，执行函数
}
}
reject(value){
if(this.PromiseState!='pending'){
return
}
this.PromiseState='rejected'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是windowcode>
this.PromiseResult=value//Promise的输出结果
while(this.onRejectedCallbacks.length){
this.onRejectedCallbacks.shift()(this.PromiseResult)//shift()获取数组第一个元素，且改变原数组
//获取的第一个元素是一个函数，执行函数
}
}
then(onFulfilled, onRejected){
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
if(this.PromiseState=='fulfilled'){
onFulfilled(this.PromiseResult)
}else if(this.PromiseState=='rejected'){
onRejected(this.PromiseResult)
}else{
//暂存函数
this.onFulfilledCallbacks.push(onFulfilled.bind(this))//onFulfilled是箭头函数的话，不bind也没影响。bind可以将onFulfilled挂在实例上。
//onFulfilled一会儿会在resolve上执行，不改变this指向的话，onFulfilled也能执行，不过内部的this不是实例
this.onRejectedCallbacks.push(onRejected.bind(this))
}
}
}
// 链式调用 输出 200
const p3 = new MyPromise((resolve, reject) => {
setTimeout(()=>{
resolve(100)
},100)
})
p3.then(res => console.log('res',res), err => console.log('err',err))
p3.then(res => console.log('res2',res*2), err => console.log('err2',err))
p3.then(res => console.log('res3',res*3), err => console.log('err3',err))
//依次输出
// res 100
// res2 200
// res3 300
实现最后一点：then支持链式调用，下一次then执行受上一次then返回值的影响；
思路：链式调用，意味着调用then()，返回的结果也是个promise
1.如果回调函数返回的是Promise对象，根据返回的Promise的状态来决定then方法返回的Promise对象的状态，
const test1 = new Promise((resolve, reject) => {
resolve(100)
})
//执行成功分支的Promise，该Promise返回reject，所以test2的返回结果与该Promise一致，走reject
const test2=test1.then(res => new Promise((resolve, reject) => reject(2 * res)), err => new Promise((resolve, reject) => resolve(3 * err)))
//
const test3= test2.then(res => console.log('success', res), err => console.log('fail', err))// 输出 状态：fail 值：200
如果回调函数返回的是非Promise对象，then方法放回的Promise对象状态为fulfilled
const test4 = new Promise((resolve, reject) => {
reject(100)
}).then(res => 2 * res, err => 3 * err)//执行err分支，3 * err，执行成功
.then(res => console.log('success', res), err => console.log('fail', err))// 输出 success 300
如果回调的不是函数，需要进行包装，且值向下传递，即res=>res,err=>err(无视回调)
const promise1= new Promise((resolve, reject) => {
resolve(100)
})
const promise2 =promise1.then(200,'据因')
promise2.then(res => console.log('res',res), err => console.log('err',err)) //'res',100（返回promise1的value值100，不是200）
const promise3 = new Promise((resolve, reject) => {
reject(100)
}).then(200,'据因')
promise2.then(res => console.log('res',res), err => console.log('err',err)) //'err',据因
实现代码：
class MyPromise{
constructor(executor){
this.initValue()
this.initBind()
try {
//执行传进来的执行函数
executor(this.resolve,this.reject)//resolve，reject
// let executor =(resolve,reject)=>{
// setTimeout(()=>{
// reject('error message')
// },1000)
// }
// executor()
} catch (e) {
// 捕捉到错误直接执行reject
this.reject(e)
}
}
// 先创建Promise初始化
initValue(){
this.PromiseState='pending'//Promise的状态code>
this.PromiseResult=null//Promise的输出结果
this.onFulfilledCallbacks=[]//成功回调
this.onRejectedCallbacks=[]//失败回调
}
//绑定this指向
initBind(){
//console.log('未绑定的this',this)//没有改变resolve和reject的this指向，此时resolve和reject函数是在class上，也就是实例的原型上
this.resolve = this.resolve.bind(this)//对class上的resolve函数，改变this指向，指向实例。this是实例，resolve不在实例上，实例上找不到，顺着在实例的原型上找
//等价于 this.resolve =this.__proto__.resolve.bind(this) ，在实例上创建一个函数，函数赋值原型上的函数resolve，此时函数内部的this指向是实例
this.reject = this.reject.bind(this)
// console.log('绑定后的this',this)
}
resolve(value){
if(this.PromiseState!='pending'){
return
}
this.PromiseState='fulfilled'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是window，code>
//所以需要将resolve的this指向指向PromiseState的同一个实例，构造函数里的属性会挂在new出来的实例，也就是，要指向p1
this.PromiseResult=value//Promise的输出结果
//执行resolve改变状态后，当成功回调里有值时，执行，注意先进先出
while(this.onFulfilledCallbacks.length){
this.onFulfilledCallbacks.shift()(this.PromiseResult)//shift()获取数组第一个元素，且改变原数组
//获取的第一个元素是一个函数，执行函数
}
}
reject(value){
if(this.PromiseState!='pending'){
return
}
this.PromiseState='rejected'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是windowcode>
this.PromiseResult=value//Promise的输出结果
while(this.onRejectedCallbacks.length){
this.onRejectedCallbacks.shift()(this.PromiseResult)//shift()获取数组第一个元素，且改变原数组
//获取的第一个元素是一个函数，执行函数
}
}
then(onFulfilled, onRejected){
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
var thenPromise= new MyPromise((resolve, reject) => {
if(this.PromiseState=='fulfilled'){
// 接收一下回调函数的结果 PromiseResult this.PromiseResult=value就是onFulfilled的参数
let result= onFulfilled(this.PromiseResult)
//如果回调函数是一个Promise,那么then的结果跟该Promise一致。如果回调函数不是Promise，那么把该值或表达式作为resolve的参数传递出去
if(result instanceof MyPromise){
thenPromise.then(v => { //该promise走成功，则resolve，走失败，则reject
// 如果返回的是resolve状态
resolve(v)
}, r => {
reject(r);
})
}else{
resolve(result)
}
}else if(this.PromiseState=='rejected'){
//失败分支同理
let result= onRejected(this.PromiseResult)
//如果回调函数是一个Promise,那么then的结果跟该Promise一致。如果回调函数不是Promise，那么把该值或表达式作为resolve的参数传递出去
if(result instanceof MyPromise){
thenPromise.then(v => { //该promise走成功，则resolve，走失败，则reject
// 如果返回的是resolve状态
resolve(v)
}, r => {
reject(r);
})
}else{
resolve(result)
}
}else if(this.PromiseState=='pending'){
//暂存函数
//要判断onFulfilled的执行结果。可以新建一个函数resultPromise，在函数内对函数结果判断。把新函数push进栈里，先不执行，等resolve上执行
//因为成功和失败的执行逻辑一样，只是调用的函数名onFulfilled、onRejected不同,所以传参区分
this.onFulfilledCallbacks.push(onFulfilled.bind(this))//onFulfilled是箭头函数的话，不bind也没影响。bind可以将onFulfilled挂在实例上。
//onFulfilled一会儿会在resolve上执行，不改变this指向的话，onFulfilled也能执行，不过内部的this不是实例
this.onRejectedCallbacks.push(onRejected.bind(this))
}
})
return thenPromise
}
}
验证之后，发现成功和失败回调都是正常的。现在来处理状态pending分支，这里我们的onFulfilled或onRejected函数还没执行，需要等会儿执行。
我们可以在外面包一层函数，新建函数resultPromise，在栈中push 这个resultPromise函数onFulfilled和onRejected处理逻辑一致，只是函数名不同，可以进行传参封装同时可以替换fulfilled和rejected分支里的代码，改为resultPromise(onFulfilled)
最后：then方法是微任务（后续事件循环章节总结会讲），所以可以套一个setTimeout代替，模拟实现异步（setTimeout为宏任务，此处主要跟在全局上的console对比）
最终实现代码：
class MyPromise{
constructor(executor){
this.initValue()
this.initBind()
try {
//执行传进来的执行函数
executor(this.resolve,this.reject)//resolve，reject
} catch (e) {
// 捕捉到错误直接执行reject
this.reject(e)
}
}
// 先创建Promise初始化
initValue(){
this.PromiseState='pending'//Promise的状态code>
this.PromiseResult=null//Promise的输出结果
this.onFulfilledCallbacks=[]//成功回调
this.onRejectedCallbacks=[]//失败回调
}
//绑定this指向
initBind(){
//console.log('未绑定的this',this)//没有改变resolve和reject的this指向，此时resolve和reject函数是在class上，也就是实例的原型上
this.resolve = this.resolve.bind(this)//对class上的resolve函数，改变this指向，指向实例。this是实例，resolve不在实例上，实例上找不到，顺着在实例的原型上找
//等价于 this.resolve =this.__proto__.resolve.bind(this) ，在实例上创建一个函数，函数赋值原型上的函数resolve，此时函数内部的this指向是实例
this.reject = this.reject.bind(this)
// console.log('绑定后的this',this)
}
resolve(value){
if(this.PromiseState!='pending'){
return
}
this.PromiseState='fulfilled'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是window，code>
//所以需要将resolve的this指向指向PromiseState的同一个实例，构造函数里的属性会挂在new出来的实例，也就是，要指向p1
this.PromiseResult=value//Promise的输出结果
//执行resolve改变状态后，当成功回调里有值时，执行，注意先进先出
while(this.onFulfilledCallbacks.length){
this.onFulfilledCallbacks.shift()(this.PromiseResult)//shift()获取数组第一个元素，且改变原数组
//获取的第一个元素是一个函数，执行函数
}
}
reject(value){
if(this.PromiseState!='pending'){
return
}
this.PromiseState='rejected'//Promise的状态 //此时this是undefind，因为resolve的调用者指向的是windowcode>
this.PromiseResult=value//Promise的输出结果
while(this.onRejectedCallbacks.length){
this.onRejectedCallbacks.shift()(this.PromiseResult)//shift()获取数组第一个元素，且改变原数组
//获取的第一个元素是一个函数，执行函数
}
}
then(onFulfilled, onRejected){
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val //包装函数，相当于res=>res，即不对结果进行处理，向下传递
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason } //包装函数，相当于err=>err，即不对结果进行处理，向下传递,同时抛出异常
var thenPromise= new MyPromise((resolve, reject) => {
const resultPromise=(FnName)=>{
setTimeout(() => { //模拟实现then异步任务
try{
// 接收一下回调函数的结果 PromiseResult this.PromiseResult=value就是onFulfilled的参数
let result= FnName(this.PromiseResult)
if (result === thenPromise) {
// 不能返回自身哦
throw new Error('不能返回自身。。。')
}
//如果回调函数是一个Promise,那么then的结果跟该Promise一致。如果回调函数不是Promise，那么把该值或表达式作为resolve的参数传递出去
if(result instanceof MyPromise){
thenPromise.then(v => { //该promise走成功，则resolve，走失败，则reject
// 如果返回的是resolve状态
resolve(v)
}, r => {
reject(r);
})
}else{
resolve(result)
}
} catch(err){
reject(err)
throw new Error(err)
}
})
}
if(this.PromiseState=='fulfilled'){
//调用函数
resultPromise(onFulfilled)
}else if(this.PromiseState=='rejected'){
//失败分支同理
resultPromise(onRejected)
}else{
//暂存函数
//要判断onFulfilled的执行结果。可以新建一个函数resultPromise，在函数内对函数结果判断。把新函数push进栈里，先不执行，等resolve上执行
//因为成功和失败的执行逻辑一样，只是调用的函数名onFulfilled、onRejected不同,所以传参区分
this.onFulfilledCallbacks.push(resultPromise.bind(this,onFulfilled))//onFulfilled是箭头函数的话，不bind也没影响。bind可以将onFulfilled挂在实例上。
//onFulfilled一会儿会在resolve上执行，不改变this指向的话，onFulfilled也能执行，不过内部的this不是实例
this.onRejectedCallbacks.push(resultPromise.bind(this,onRejected))
}
})
return thenPromise
}
}
Promise相关 API实现
all
接收一个Promise数组，数组中如有非Promise项，则此项当做成功；如果所有Promise都成功，则返回成功结果数组；如果有一个Promise失败，则返回这个失败结果；
实现思路：
定义一个数组和计数器，当Promise成功的时候数组添加成功回调值，计数器加1，同时判断此时的计数器与Promise数组长度是否相同，相同resolve(数组)
static all(promises) {
const result = []
let count = 0
return new MyPromise((resolve, reject) => {
const addData = (index, value) => {
result[index] = value
count++
if (count === promises.length) resolve(result)
}
promises.forEach((promise, index) => {
if (promise instanceof MyPromise) {
promise.then(res => {
addData(index, res)
}, err => reject(err))
} else {
addData(index, promise)
}
})
})
}
race
接收一个Promise数组，数组中如有非Promise项，则此项当做成功；哪个Promise最快得到结果，就返回那个结果，无论成功失败；
实现思路：
遍历循环Promise数组，都进行输出，哪个结果最快，就会输出，返回那个值，利用Promise的状态一旦改变，就不会更改，只执行第一个resolve或reject
static race(promises) {
return new MyPromise((resolve, reject) => {
promises.forEach(promise => {
if (promise instanceof MyPromise) {
promise.then(res => {
resolve(res)
}, err => {
reject(err)
})
} else {
resolve(promise)
}
})
})
}
allSettled
接收一个Promise数组，数组中如有非Promise项，则此项当做成功；把每一个Promise的结果，集合成数组后返回；
实现思路：
定义一个数组和计数器，当Promise数组的每次Promise调用，数组添加回调值，计数器加1，当计数器与Promise数组长度相同时，返回esolve(数组)
static allSettled(promises) {
return new Promise((resolve, reject) => {
const res = []
let count = 0
const addData = (status, value, i) => {
res[i] = {
status,
value
}
count++
if (count === promises.length) {
resolve(res)
}
}
promises.forEach((promise, i) => {
if (promise instanceof MyPromise) {
promise.then(res => {
addData('fulfilled', res, i)
}, err => {
addData('rejected', err, i)
})
} else {
addData('fulfilled', promise, i)
}
})
})
}
any
与all相反
接收一个Promise数组，数组中如有非Promise项，则此项当做成功；如果有一个Promise成功，则返回这个成功结果；返回第一个兑现的值如果所有Promise都失败，则报错；
实现思路：
定义计数器，当Promise数组的每次Promise调用，当成功的时候，直接返回成功（第一个成功的返回，和race一样）；失败的时候，计数器加1，当计数器与Promise数组长度相同时，返回报错信息
static any(promises) {
return new Promise((resolve, reject) => {
let count = 0
promises.forEach((promise) => {
promise.then(val => {
resolve(val)
}, err => {
count++
if (count === promises.length) {
reject(new AggregateError('All promises were rejected'))
}
})
})
})
}
}
思考题（下一章讲）
实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有N个。完善下面代码中的 Scheduler 类，使得以下程序能正确输出：
class Scheduler {
add(promiseCreator) { ... }
// ...
}
const timeout = (time) => new Promise(resolve => {
setTimeout(resolve, time)
})
const scheduler = new Scheduler(n)
const addTask = (time, order) => {
scheduler.add(() => timeout(time)).then(() => console.log(order))
}
addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')
// 打印顺序是：2 3 1 4
async/await和Promise的关系
async/await和Promise的对应关系：async封装Promise，await相当then，try…catch相当于catch
1. 执行async函数，返回的是Promise对象
async function fn1(){
return 100 //相当于return Promise.resolve(100)
}
const res1=fn1()//执行async函数，返回的是一个Promise对象,比如上面的return 100封装成了一个Promise对象进行返回
console.log('res1',res1)//Promise对象
res1.then(data=>{
console.log('data',data)//100
})
//可以用const data= await fn1()接收data值 使用await，要和async配套
2. await相当于Promise的then
!( async function(){
const res2=Promise.resolve(100)//相当于上面例子的res1 也就是fn1()
const data= await res2 //await相当于Promise的then res1.then(data=>{})
console.log('data',data)//100
})()
!( async function(){
const res2=await 400 //await Promise.resolve(400) await后面不跟Promise，也会被封装成Promise
console.log('res2',res2)//400
})()
3. try…catch 可捕获异常，代替了Promise的catch
!( async function(){
const p4=Promise.reject('err')//rejected状态
try{
const res=await p4 //await相当于then，但是reject不会触发then
console.log(res) //不会输出，因为const res=await p4被报错，被catch捕获
} catch(ex){
console.error(ex)//try...catch 相当于Promise的catch
}
})()
async/await的使用
async/await的用处：用同步方式，执行异步操作
现在有一个新的要求：先请求完接口1，再拿接口1返回的数据，去当做接口2的请求参数，那我们可以这么做：
Promise做法
function request(num) { // 模拟接口请求
return new Promise(resolve => {
setTimeout(() => {
resolve(num * 2)
}, 1000)
})
}
request(5).then(res1 => {
console.log(res1) // 1秒后 输出 10
request(res1).then(res2 => {
console.log(res2) // 2秒后 输出 20
})
})
async/await做法
function request(num) { // 模拟接口请求
return new Promise(resolve => {
setTimeout(() => {
resolve(num * 2)
}, 1000)
})
}
async function fn () {
const res1 = await request(5)
const res2 = await request(res1)
console.log(res2) // 2秒后输出 20
}
fn()
在async函数中，await规定了异步操作只能一个一个排队执行，从而达到用同步方式，执行异步操作的效果。
注意：await只能在async函数中使用
刚刚上面的例子await后面都是跟着异步操作Promise，那如果不接Promise？
function request(num) { // 去掉Promise
setTimeout(() => {
console.log(num * 2)
}, 1000)
}
async function fn() {
await request(1) // 2
await request(2) // 4
// 1秒后执行完 同时输出
}
fn()
可以看出，如果await后面接的不是Promise的话，等同于async/await不生效，等价于
function request(num) { // 去掉Promise
setTimeout(() => {
console.log(num * 2)
}, 1000)
}
function fn() {
request(1) // 2
request(2) // 4
// 1秒后执行完 同时输出
}
fn()
Q：什么是async？
async是一个位于function之前的前缀，只有async函数中，才能使用await。
async执行完是返回一个 Promise ，状态为fulfilled，值是function的返回值
async function fn (num) {
return num //相当于return Promise.resolve(num)
}
console.log(fn) // [AsyncFunction: fn]
console.log(fn(10)) // Promise {<fulfilled>: 10}
fn(10).then(res => console.log(res)) // 10
总结
await只能在async函数中使用，不然会报错；async函数返回的是一个Promise对象，有无值看有无return值；await后面最好是接Promise，虽然接其他值也能达到排队效（但是作用等于原来不使用await的时候）；async/await作用是用同步方式，执行异步操作async/await是一种语法糖，用到的是ES6里的迭代函数——generator函数（可以自行了解）（ES6的class也是语法糖，用普通function也能实现同样效果）
上一篇： Vue3的11种组件间通信方式简单说明，前端必备5分钟完看学会
下一篇： 【.NET Web API+Vue3】前后端分离登录案例
本文标签
3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。