前端基础知识之手写 Promise.all

149 阅读1分钟

今天我们来总结一下 Promise.all() 方法。

它接收一个 promise 的 iterable 类型(在 ES6 中包括 Array,Map,Set 等),并且返回一个 Promise 的实例。

而它也跟 promise 一样,有 resolve 和 reject 两种回调。

其中,输入的所有的 promise 的 resolve 回调的结果是一个数组,这个 promise 的 resolve 回调在数组中所有 promise 的 resolve 回调都结束或输入的 iterable 里没有 promise 的时候才会执行;而 reject 的回调执行会在任意一个 promise 的回调执行或者输入不合法的 promise 的时候就立即抛出错误,并且抛出的是第一个错误信息。

简单来说,promise.all() 方法会接收一系列的 promise,其 resolve 方法会在所有 promise 方法的 resolve 回调执行后才执行,而其 reject 回调会在任意一个 promise 有 reject 回调执行时立即抛出错误。

接下来简单写一个手写版的 promise.all():

//const pa = Promise.all([promise1,promise2,promise3])

//pa.then(f1,(reason)=> console.error(reason))//三个全部成功才调用f1

//const [data1,data2,data3] = await Promise.all([])


Promise.all2 = (promiseList)=>{
    return new Promise((resolve,reject)=>{
        const length = promiseList.length
	let count = 0
        const result = new Array(length)
        promiseList.map((promise,index) =>{
            promise.then(()=>{
                result[index] = data
                count += 1
		if(count === length-1){
                    resolve(result)
                }
            },(r)=>{
                reject(r)
            })
	})
    })
}

const promiseList = [Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)]
Promise.all2(promiseList).then(data=>console.log(data),r=>console.error(r))

其中重点是在执行 resolve 回调时会一直循环执行到计数器 count === length-1,表明已经是输入的 promise 数组的最后一项并且也是执行 resolve 回调时,才会执行 promise.all() 的 resolve 方法;而当发现其中有任何一个执行了 reject 回调,就立刻执行 promise.all() 的 reject 方法。

©本总结教程版权归作者所有,转载需注明出处