听说你还不知道Promise的allSettled()和all()的区别?

简介: 从 ES2015 起, promises 的出现,让我们简化了异步操作。(所以 promise 越来越流行,掌握它的相关 API 变得至关重要)。

译文来自 https://dev.to/viclafouch/promise-allsettled-vs-promise-all-in-javascript-4mle


原作者 Victor de la Fouchardière

译者: 蓝色的秋风(github/hua1995116)


往期异步函数相关📚




Hello! 🧑‍🌾


从 ES2015 起, promises 的出现,让我们简化了异步操作。(所以 promise 越来越流行,掌握它的相关 API 变得至关重要)。


让我们来看看以下两个 Promise 方式及他们差异:


  • Promise.allSettled(可迭代)
  • Promise.all(可迭代)


他们两个都传入可 迭代对象,并返回一个已完成的 Promises 的数组


❓那么,它们之间有什么区别呢?


Promise.all()🧠



Promise.all()方法将一组可迭代的 Promises 作为输入,并返回一个 Promise ,该 Promise resolve 的结果为刚才那组 输入 promises 的返回结果。


image.png


正如你看到的那样,我们将数组传递给 Promise.all。当三个 promise 都完成时,Promise.all 就完成了,并且输出被打印了。


现在,让我们看看其中一个 promise 失败了的情况,如果这个 promise 失败了,又会 输出什么呢?🛑


image.png


如果其中一个 promise 失败了,则 Promise.all 整体将会失败。例如,我们传递2个 promise, 一个完成的 promise 和 一个 失败的promise,那么 Promise.all 将立即失败。


Promise.allSettled()📪



从 ES2020 开始,你可以使用 Promise.allSettled。当所有的 promises 都已经结束无论是完成状态或者是失败状态,它都会返回一个 promise,这个 promise 将会包含一个关于描述每个 promise 状态结果的对象数组。


对于每个结果对象,都有一个状态字符串:


  • fulfilled(完成)
  • rejected(失败)


返回值(或原因)表现每个 promise 的完成(或失败)。


仔细观察结果数组的以下属性(status-状态value-值reason-原因)。


image.png


区别👬


  • Promise.all 将在 Promises 数组中的其中一个 Promises 失败后立即失败。
  • Promise.allSettled将永远不会失败,一旦数组中的所有 Promises 被完成或失败,它就会完成。


浏览器支持 🚸



下面列出了Promise.allSettled()promise.all()方法浏览器的支持情况:

Promise.allSettled()


image.png


promise.all()


image.png


相关文章
|
11月前
|
前端开发
20 # 实现 promise 的 all 方法
20 # 实现 promise 的 all 方法
42 0
|
4月前
|
前端开发
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
|
前端开发
promise的resolve,reject,all方法
promise的resolve,reject,all方法
212 0
|
4月前
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。
|
4月前
|
前端开发
promise和async的区别是什么?
promise和async的区别是什么?
45 1
|
10月前
|
前端开发
promise中reject和catch处理上有什么区别
promise中reject和catch处理上有什么区别
114 0
|
存储 前端开发 JavaScript
Promise.all和Promise.race的区别和使用
比如当数组里的P1,P2都执行完成时,页面才显示。 值得注意的是,返回的数组结果顺序不会改变,即使P2的返回要比P1的返回快,顺序依然是P1,P2 Promise.all成功返回成功数组, 失败返回失败数据,一但失败就不会继续往下走
|
前端开发
Promise与async/await的区别?
Promise与async/await的区别?
|
前端开发 C++
【面试】‘return await promise‘ 与 ‘return promise‘ 这细微的区别,你的可能还不知道?
当从一个异步函数的promise返回时,我们可以使用return await promise等待 promise 解析完,也可以直接返回它 return promise。