手动实现***promise.all promise.race promise.allsetted promise.any***
script代码
const p1 = Promise.resolve('p1');
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P2延时了1秒钟')
}, 1000)
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P3延时了2秒钟')
}, 5000)
});
const p4 = Promise.reject('p4 rejected');
const p5 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P5 rejected延时了4秒钟')
}, 4000)
});
1 promise.all
1.1原生promise.all测试
Promise.all接收一个可遍历的数组容器,当数组中每个promise实例都成功时,promise.all才成功。promise实例所有的resolve结果会按原来的顺序集合在一个数组中作为Promise.all的resolve的结果
只要有一个失败就失败promise.catch就会捕获到这个reject。
//全部resolve
Promise.all([p1,p2,p3])
.then(res=>console.log(res))
.catch(err=>console.log(err)) //['p1', 'P2延时了1秒钟', 'P3延时了2秒钟']
// 有一个reject
Promise.all([p1,p2,p5])
.then(res=>console.log(res))
.catch(err=>console.log(err)) // P5 rejected延时了4秒钟
// 有两个rejected
Promise.all([p1, p5, p4]).then(res => console.log(res)).
catch(err => console.log(err)) //p4 rejected
1.2 手动实现–上代码
//promise.all 接收一个数组 返回一个promise对象,若全部成功返回数组,若一个失败则返回reject的内容
Promise.myAll=(promises)=>{
let arr=[];
let count=0;
return new Promise((resolve,reject)=>{
promises.forEach((item,i)=>{
Promise.resolve(item).then(res=>{
arr[i]=res;
count+=1;
if(promises.length === count) resolve(arr)
})
},reject)
})
}
2 promise.race
2.1 原生promise.race测试
Promise.race相当于是赛跑, 最先resolve,reject的先返回
// 全部resolve
Promise.race([p1, p2, p3])
.then(res => console.log(res))
.catch(err => console.log(err)) //p1
//有一个reject
Promise.race([p1, p2, p5])
.then(res => console.log(res))
.catch(err => console.log(err)) //p1
// 有两个rejected
Promise.race([p1, p5, p4])
.then(res => console.log(res))
.catch(err => console.log(err)) //p4 rejected
2.2 手动实现promise.race
Promise.myRace=(promises)=>{
return new Promise((resolve,reject)=>{
promises.forEach(item=>{
Promise.resolve(item).then(res=>resolve(res),reject)
})
})
}
3 promise.any
promise.any 中只要有一个Promise实例成功就成功,只有当所有的Promise实例失败Promise.any才失败,此时Promise.any会把所有的失败/错误集合在一起,返回一个失败的promise和AggregateError 类型的实例
3.1 测试原生promise.any
Promise.any([p1, p2, p3]).then(res => {
console.log(res)
}).catch(err => console.log(err)) //p1
Promise.any([p1, p2, p5]).then(res => {
console.log(res)
}).catch(err => console.log(err)) //p1
Promise.any([p4, p5, p1]).then(res => {
console.log(res)
}).catch(err => console.log(err)) //p1
Promise.any([p1, p5, p4]).then(res => {
console.log(res)
}).catch(err => console.log(err)) //p1
Promise.any([p5, p4]).then(res => {
console.log(res)
}).catch(err => console.log(err)) //AggregateError: All promises were rejected
3.2 手动实现
Promise.myAny = (promises) => {
let arr = [];
let count = 0;
return new Promise((resolve, reject) => {
promises.forEach(item => {
Promise.resolve(item).then(res => resolve(res), err => {
count += 1;
if (count === promises.length)
reject('AggregateError: All promises were rejected')
})
})
})
}
4 promise.allSettled
希望一组promise实例无论在成功与否,都等他们异步操作结束了在继续执行下一步操作
4.1 原生promise.allSettled测试
Promise.allSettled([p1, p2, p3])
.then(res => {console.log(res)})
.catch(err => console.log(err))
// [
// {status: 'fulfilled', value: 'p1'},
// {status: 'fulfilled', value: 'P2延时了1秒钟'},
// {status: 'fulfilled', value: 'P3延时了2秒钟'
// ]
Promise.allSettled([p1, p2, p5]).then(res => {
console.log(res)
}).catch(err => console.log(err))
// [
// {status: 'fulfilled', value: 'p1'},
// {status: 'fulfilled', value: 'P2延时了1秒钟'},
// {status: 'rejected', reason: 'P5 rejected延时了1秒钟'}
// ]
4.2手动实现promise.allSettled
Promise.myAllSettled=(promises)=>{
let arr=[];
let count=0;
return new Promise((resolve,reject)=>{
promises.forEach((item,i)=>{
Promise.resolve(item).then(res=>{
arr[i]={status:"fulfilled",value:res}
count+=1;
if(count === promises.length) resolve(arr)
},err=>{
arr[i]={status:'rejected',value:err}
count+=1;
if(count === promises.length) resolve(arr)
})
})
})
}
//优化一下下
Promise.myAllSettled = (promises) => {
let arr = [];
let count = 0;
return new Promise((resolve, reject) => {
const func = (i, status, res) => {
arr[i] = { status: status, value: res }
count += 1;
if (count === promises.length) resolve(arr)
}
promises.forEach((item, i) => {
Promise.resolve(item).then(res => {
func(i, "fulfilled", res)
}, err => {
func(i, "rejected", err)
})
})
})
}
仅供自己学习使用,如有错误欢迎指正