手把手教你实现Promise.all

1.Promise.all(args)的用法和用途:

Promise.all(args)是一个方法来的,返回的是一个Promise实例，参数是一个数组，数组的每一项都是一个promise，等数组的每一项promise都成功resolve之后，Promise.all()才能resolve；如果有一个promise失败，那么Promise.all就会回调reject。

2.预备知识，判断Promise

const isPromise = function (promise) {
	return (
		!!promise &&
		(typeof promise === 'object' || typeof promise === 'function') &&
		(typeof promise.then === 'function')
	)
}

注：使用两个感叹号，是将promise转成Boolean类型，再转回来，比较正规。

3.实现Promise.all()

1.我们先制造几个promise

const p1 = new Promise((resolve,reject) => {
	setTimeout(()=>{
		resolve('1')
	},100)
})
const p2 = new Promise((resolve,reject) => {
	setTimeout(()=>{
		resolve('2')
	},1000)
})
const p3 = new Promise((resolve,reject) => {
	setTimeout(()=>{
		resolve('3')
	},10000)
})

2.根据我们描述Promise.all()的用法来实现它

// promiseAll是一个函数，返回一个Promise实例，接受参数是一个数组。
const promiseAll = function(promises) {
	if(!Array.isArray(promises)) {
		return console.log('传入参数必须是一个数组')				
	}
	return new Promise((resolve,reject) => {
		let length = promises.length // 缓存一下有多少个promise
		let count = 0 // 用于记录resolve的数量
		let values = new Array(length) // 用于存储resolve返回的值
		for(let i = 0; i < length; i++) {
			let promise = promises[i]
			// 判断数组的每一项，如果是promise，就进入then，不是就直接放进values数组中返回
			if(isPromise(promise)) {
				promise.then(res => {
					// 记录promise完成的数量
					count++
					// values存储每一个promise的res
					values[i] = res
					// 由于异步代码在最后执行，我们需要在then里面判断promise的完成数量，全部完成就resolve
					// 在for外面判断，是防止它全部都不是promise实例
					if(count === length) {
						resolve(values)
					}
				}).catch(err =>{
					// 当有一个promise实例reject，我们就直接reject
					reject(err)
				})
			} else { // 针对不是promise实例
				count++
				values[i] = promise
			}
		}
		// 当数据的所有项都不是promise实例，我们就在这判断多一次，然后resolve
		if(count === length) {
			resolve(values)
		}
	})
}

注：只要你会使用Promise，一步步的对着Promise.all的用法和介绍来实现，基本都能自己实现出来。每一步我都注释的挺详细的了，加油！-.-