手写Promise.all
首先来聊一聊Promise的3个方法all、allSettled、race的区别。
共同点: 都是将多个Promise组合返回成一个Promise。
不同点: 简单来说就是race是谁先返回谁先输出,all是只要有一个没有返回成功那么就请求失败,allSettled是不管你是否成功都给你返回回来并且带上每个Promise的状态。
// 先定义3个模拟接口的函数
const fn1 = () => {
return new Promise((resolve, reject) => {
resolve(111111);
});
};
const fn2 = () => {
return new Promise((resolve, reject) => {
resolve(22222);
});
};
const fn3 = () => {
return new Promise((resolve, reject) => {
resolve(33333);
});
};
根据all的特性可以知道 当有一个失败的时候就会整个返回失败,我们用一个数组用来记录每一次成功调用的值,在遍历调用的时候当请求失败立即抛出错误不执行后面的代码,假如遍历到最后一个Promise也成功的话就会resolve出所有的数据。
完整代码
const PromiseAll = (d = []) => {
return new Promise((resolve, reject) => {
const result = [];
d.forEach((v, i) => {
v.then((res) => {
result.push(res);
if (result.length === d.length) {
resolve({
state: true,
data: result,
message: null,
});
}
}).catch((res) => {
// 当请求错误的时候直接抛出错误
reject({
state: false,
data: null,
message: '请求失败了',
});
});
});
});
};
抛砖引玉,感兴趣的小伙伴可以试试race与allSettled