Promise.all、Promise.race、Promise.allsettled的实现

引言

promise在前端是一个很重要的知识点，它主要是解决了回调地狱的问题，使得我们的代码更加优雅。相信在面试的小伙伴可以遇到过实现Promise.all、Promise.race、Promise.allsettled之一的面试题。主要是考察我们对这些方法和promise的使用是否熟悉。

需要了解

下面对Promise.all、Promise.race、Promise.allsettled方法做一个简单介绍，如果对这些方法已经很熟悉的小伙伴，可以跳过这一章节。
promise.all
参数是一个 promise 数组，只有当所有的promise是成功态，该方法返回的promise才会进入成功态。

Promise.all([Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)])
.then((res)=>{console.log(res)})  //     [1,2,3]。进入成功态的话，返回所有成功的结果
.catch((err)=>{console.log(err)})  //    进入失败态的话，返回第一个失败promise的错误

promise.race
参数是一个 promise 数组，方法返回的是最快进入.then的promise。

Promise.race([Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)])
.then((res)=>{console.log(res)})      // 最快的promise如果是成功态，在这里返回结果
.catch((err)=>{console.log(err)})   //  最快的promise如果是失败态，在这里返回结果

参数是一个 promise 数组，无论何种情况方法始终返回一个成功态的promise，只是promise的结果会有差异。
promise.allsettled

 Promise.allsettled([Promise.resolve(1),Promise.reject(2),Promise.resolve(3)])
 .then((res)=>{console.log(res)})  
 /*
 [
  {status:'fulfilled',value:1},
  {status:'rejected',reason:2},
  {status:'fulfilled',value:3} 
]
*/

方法实现

实现 promise.all

function promiseAll(arr=[]){
	return new Promise((rel,rej)=>{
	let allres=[]       // 保存所有成功态promise的结果
	for(let p of arr){
		p.then((res)=>{allres.push(res)})    
		.catch((err)=>{rej(err)})       // 一旦遇到失败态的promise，调用 rej，使得返回的promise进入失败态
		.finally(()=>{
		     // 当所有promise都是成功态时，调用 rel，使得返回的promise进入成功态
		    if(allres.length==arr.length)rel(allres)
		})    
	}
	})   
}

const ps1=[Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)]
const ps2=[Promise.reject(1),Promise.reject(2),Promise.resolve(3)]

promiseAll(ps1)
.then(res=>console.log("success",res))  //  success [1,2,3]
.catch(err=>console.log("fail",err))   

promiseAll(ps2)
.then(res=>console.log("success",res))  
.catch(err=>console.log("fail",err))   //  fail 1

实现 promise.race

function promiseRace(parr=[]){
	return new Promise((rel,rej)=>{
		for(let p of parr){
			// 哪个promise先进入 .then 就直接调用 rel或者rej，使得返回的promise是最快执行的promise
			p.then((res)=>{rel(res)}，(err)=>{rej(err)})     
	   }
	})
}

promiseRace([Promise.reject('err'),Promise.resolve('success'),Promise.resolve('ok')])
.then((res)=>{console.log(res)})
.catch((err)=>{console.log(err)})

实现 promise.allsettled

function allSettled(parr=[]){
	const arr=[]   // 用来保存所有promise的结果
	return new Promise(rel=>{
		for(let p of parr){
		p.then((res)=>{arr.push({status:'fulfilled',value:res})})  // 如果是成功态的promise，返回这种形式的数据
		.catch((err)=>{arr.push({status:'rejected',reason:err})})  // 如果是失败态的promise，返回这种形式的数据
		.finally(()=>{if(arr.length===parr.length)rel(arr)})// 等所有结果收集完毕后，使得返回的promise进入.then的成功回调
		}
	})
}

allSettled([Promise.reject('err'),Promise.resolve('success'),Promise.resolve('ok')]))
.then((res)=>{console.log(res)})

结尾

相信看完这篇文章的小伙伴对于这些方法的实现一定是没什么问题了，感谢你对观看，希望这篇文章能给你带来快乐。如果有小伙伴有一些问题或者疑惑，欢迎提出和分享。