前言
本文主要是介绍手写Promise.all,一般来说,Promise.all用来处理多个并发请求,也是为了页面数据构造的方便,将一个页面所用到的在不同的接口的数据一起请求过来,不过,如果其中一个接口失败了,多个请求也就失败了,页面可能啥也都出不来,这就看当前页面的耦合程度了
一、Promise.all的核心思路
- 接收一个Promise实例的数组或具有Iterator接口的对象作为参数
- 这个方法返回一个新的promise对象
- 遍历传入的参数,用Promise.resolve()将参数"包一层",使其变成一个promise对象
- 参数所有回调成功才是成功,返回值数组与参数顺序一致
- 参数数组其中一个失败,则触发失败状态,第一个触发失败的Promise错误信息作为Promise.all的错误信息
二、实现代码
1.promiseAll Function
代码如下(示例):
function promiseAll (promises) {
return new Promise((resolve, reject) => {
if (!Array.isArray(promises)) {
return new TypeError(' arugument must be a array')
}
let resolvedCounter = 0;
let resolvedNum = promises.length;
let resolvedResult = []
for (let i = 0; i < resolvedNum; i++) {
Promise.resolve(promises[i]).then(value => {
resolvedCounter++;
resolvedResult[i] = value;
if (resolvedCounter === resolvedNum) {
return resolve(resolvedResult)
}
}, error => {
return reject(error)
})
}
})
}
2.test
代码如下(示例):
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('1')
}, 1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(function () {
resolve('2')
}, 2000)
})
let p3 = new Promise((resolve, reject) => {
setTimeout(function () {
resolve('3')
}, 3000)
})
promiseAll([p3, p1, p2]).then(res => {
console.log(res)
})
总结
以上就是手写promise.all的代码了!