手动实现Promise.all()和 Promise.race()

最新推荐文章于 2024-02-27 11:35:18 发布

boboluotou

最新推荐文章于 2024-02-27 11:35:18 发布

阅读量464

点赞数

分类专栏：前端面试 Vue 前端

本文链接：https://blog.csdn.net/weixin_45798469/article/details/115046940

版权

本文详细介绍了Promise.all()的工作原理，包括完成情况的三种状态及其实现，特别是当传入的可迭代对象为空、全部Promise完成以及包含非Promise值时的情况。同时讨论了Promise.all()在遇到一个Promise被拒绝时如何处理。接着，文章探讨了Promise.race()的特性，即仅保留第一个完成的异步操作结果，即使其他操作仍在执行。

摘要由CSDN通过智能技术生成

参考链接：https://www.jianshu.com/p/c17085ce40ec

1 Promise.all

Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例，那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。

Promise.all() 方法将多个Promise实例包装成一个Promise对象§,接受一个数组(P1,P2,P3)作为参数，数组中不一定需要都是Promise对象，但是一定具有Iterator接口，如果不是的话，就会调用Promise.resolve将其转化为Promise对象之后再进行处理。使用Promise.all()生成的Promise对象§的状态是由数组中的Promise对象(P1,P2,P3)决定的。
1 如果所有的Promise对象(P1,P2,P3)都变成fullfilled状态的话，生成的Promise对象§也会变成fullfilled状态，P1,P2,P3三个Promise对象产生的结果会组成一个数组返回给传递给P的回调函数。
2 如果P1,P2,P3中有一个Promise对象变为rejected状态的话，P也会变成rejected状态，第一个被rejected的对象的返回值会传递给P的回调函数。
Promise.all()方法生成的Promise对象也会有一个catch方法来捕获错误处理，但是如果数组中的Promise对象变成rejected状态时，并且这个对象还定义了catch的方法，那么rejected的对象会执行自己的catch方法，并且返回一个状态为fullfilled的Promise对象，Promise.all()生成的对象会接受这个Promise对象，不会返回rejected状态。

此方法在集合多个promise的返回结果时很有用。

完成（Fulfillment）：

如果传入的可迭代对象为空，Promise.all会同步地返回一个已完成（resolved）状态的promise。

如果所有传入的promise都变为完成状态，或者传入的可迭代对象内没有promise，Promise.all返回的promise异步地变为完成。

在任何情况下，Promise.all返回的promise的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非promise值）。

失败/拒绝（Rejection）：

如果传入的promise中有一个失败（rejected），Promise.all异步地将失败的那个结果给失败状态