Promise.all

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

Promise.all() 功能

现在有两个接口,要求必须等两个接口全部请求完成后才能渲染数据. 类似于这样的场景就会用到 Promise 的 all 方法

• Prmoise.all() 是 Promise 的静态方法,接收一个或多个 Prmosie 实例组成的数组,并且返回一个 新的 Promise 实例
• 如果有一个失败,那么新返回的 Promise 实例的状态都变成 resolve, 那么返回的新的 Promise 实例的状态才能变成 resolve;
• 如果有一个失败,那么新返回的 Promise 实例的状态就会变为失败;
• 同时,会把数组中的 Promise 实例成功的数据组成一个新的数组,传递给后面 then 方法的第一个 回调函数

function queryFn(url) {
			return new Prmoise((resolve, reject) => {
				$.ajax({
					url: url,
					cache: false,
					error(err) {
						reject(err)
					},
					success(data) {
						resolve(data)
					}
				})
			})
		}
		Promise.all([queryFn('aside.json'), queryFn('banner.json')]).then((dataArr) => {
			consloe.log(dataArr)
		}).catch((err) => {
			console.log(err)
		})

原生封装

复制代码p的状态由 p1,p2,p3决定，分成以下；两种情况： // （1）只有p1、p2、p3的状态都变成 fulfilled，p的状态才会变成 fulfilled，此时p1、p2、p3的 返回值组成一个数组，传递给p的回调函数。 // （2）只要p1、p2、p3之中有一个被 rejected，p的状态就变成 rejected，此时第一个被reject的 实例的返回值，会传递给p的回调函数

let p = Promise.all([p1, p2, p3])
		Promise.all = (promise) => {
			return new Promise((resolve, reject) => {
				let index = 0; // 用于计算promise 形参需求的数量 用于对比
				let result = [] // 用于储存请求成功的请求需求以及请求回来的数据
				if (prmoise.length === 0) {
					// 判断是否形参内有请求需求 如果没有就resolve这个空数组以 免报错
					resolve(result)
				} else {
					// else 是说明这个形参数组中是有请求需求的 
					function addResult(i, data) {
						// 声明一个函数 用于将 promise 这个形参数组中的请求成功的,
						//  请求需求 和 已经请求回 来的数据放进 result 数组中 
						// i promise 中每个成功的请求需求 
						// data 每个请求需求成功请求回来的数据 
						result[i] = data
						if (++index === promise.length) {
							resolve(result)
							// 最后 统一resolve result 这个所有请求成功的数组集合 
						}
					}
				}
				for (let i = 0; i < promise.length; i++) {
					// 循环形参 promise 
					Promise.resolve(promise[i]).then((data) => {
						// 调用 Promise.resolve 方法传进 形参第一个请求需求并 调用 .then方法 接收请求数 据 
						addResult(i, data)
						// 将请求成功的需求 和 请求回来的数据放进 addResult 函数中 
					}, (err) => {
						reject(err)
						//请求不成功执行 .then的第二个回调 reject 请求报错 
						return
					})
				}
			})
		}
		Promise.all(['请求接口']) //Promise.all 需要传递进去一个数组