Promise.allSettled()的用法

更新日期: 2022-12-09 阅读: 1.6k 标签: Promise

Promise.allSettled()是一个JavaScript方法,它返回一个promise,在所有给定的promise都完成(成功或失败)后完成。与Promise.all()方法不同,Promise.allSettled()方法不会因为某个promise失败而导致整个操作失败,它会等待所有的promise都完成,然后返回一个包含所有promise状态的数组。


示例代码

const promise1 = Promise.resolve("foo");
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("bar");
  }, 100);
});

Promise.allSettled([promise1, promise2, promise3]).then(results => {
  results.forEach(result => {
    if (result.status === "fulfilled") {
      console.log(`promise fulfilled with value: ${result.value}`);
    } else if (result.status === "rejected") {
      console.log(`promise rejected with reason: ${result.reason}`);
    }
  });
});

// expected output:
// "promise fulfilled with value: foo"
// "promise fulfilled with value: 42"
// "promise rejected with reason: bar"

在上面的示例中,我们使用Promise.allSettled()方法等待三个promise完成。其中两个promise(promise1和promise2)都成功完成,第三个promise(promise3)失败了。然后我们循环遍历结果数组,并在控制台中打印每个promise的状态和值。

总之,Promise.allSettled()方法可以让你等待所有给定的promise都完成,然后返回一个包含它们所有状态的数组。这对于需要处理多个并行操作的情况非常有用。


取水果和蔬菜

在深入研究 Promise.allSettle() 之前,我们先定义两个简单的 helper 函数

首先,resolveTimeout(value, delay)返回一个 promise ,该 promise 在经过 delay 时间后用 value 来实现

function resolveTimeout(value, delay) {
  return new Promise(
    resolve => setTimeout(() => resolve(value), delay)
  );
}

第二,rejectTimeout(reason, delay) - 返回一个 promise,在经过 delay 时间后拒绝reason。

最后,我们使用这些辅助函数来试验 promise.allsettle()。

1.All promises fulfilled

我们同时访问当地杂货店的蔬菜和水果。访问每个列表是一个异步操作:

const statusesPromise = Promise.allSettled([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  resolveTimeout(['oranges', 'apples'], 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },
//   { status: 'fulfilled', value: ['oranges', 'apples'] }
// ]

Promise.allSettled([...])返回一个 promise statusesPromise,该 promise 在1秒内解决,就在蔬菜和水果被解决之后,并行地解决。

statusesPromise 解析为一个包含状态的数组。

  1. 数组的第一项包含有蔬菜的已完成状态:status: 'fulfilled', value: ['potatoes', 'tomatoes'] }
  2. 同样的方式,第二项是水果的完成状态: { status: 'fulfilled', value: ['oranges', 'apples'] }


2.一个 promise 被拒绝

想象一下,在杂货店里已经没有水果了。在这种情况下,我们拒绝水果的 promise。

promise.allsettle() 在这种情况下如何工作?

const statusesPromise = Promise.allSettled([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },
//   { status: 'rejected', reason: Error('Out of fruits!') }
// ]

Promise.allSettled([...]) 返回的 promise 在 1 秒后解析为一个状态数组:

  1. 数组的第一项,蔬菜 promise 成功解析:{ status: 'fulfilled', value: ['potatoes', 'tomatoes'] }
  2. 第二项,因为水果 promise 被拒绝,所以是一个拒绝状态: { status: 'rejected', reason: Error('Out of fruits') }

即使输入数组中的第二个 promise 被拒绝,statusesPromise仍然会成功解析一个状态数组。


3.所有的 promises 都被 rejected

如果杂货店里的蔬菜和水果都卖光了怎么办?在这种情况下,两个 promise 都会被拒绝。

const statusesPromise = Promise.allSettled([
  rejectTimeout(new Error('Out of vegetables!'), 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'rejected', reason: Error('Out of vegetables!')  },
//   { status: 'rejected', reason: Error('Out of fruits!') }
// ]

在这种情况下,statusesPromise仍然成功地解析为一个状态数组。然而,该数组包含被拒绝的promise 的状态。


总结

Promise.allSettled(promises)可以并行地运行 promise,并将状态(fulfilled 或reject)收集到一个聚合数组中。Promise.allSettled(...)在你需要执行平行和独立的异步操作并收集所有结果时非常有效,即使某些异步操作可能失败。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/12252

相关推荐

你真的了解 Promise 吗?Promise 必知必会(十道题)

Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。

Promise.resolve()详解

Promise.resolve等价于下面的写法,有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。Promise.resolve方法的参数分成四种情况。那么 then 返回的 Promise 将会成为接受状态(resolve)

手写一款符合Promise/A+规范的Promise

Promise的一些用法在此不多赘述,本篇主要带领你手写一个Promise源码,学完你就会发现:Promise没有你想象中的那么难.本篇大概分为以下步骤:实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试

JS中Promise.reject()

es6中Promise.reject(reason)方法返回一个带有拒绝原因reason参数的Promise对象。该方法也会返回一个新的 Promise 实例,该实例的状态为rejected。

Promise使用时应注意的问题

最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因

简单模仿实现 Promise 的异步模式

这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。和原生 Promise的调用方法一样,支持链式调用,本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。

停止在 JavaScript 中使用 Promise.all()

如果你偶然发现了这篇文章,你可能已经对 promises 很熟悉了。但对于那些新接触 JavaScript 的人来说,我们来详细解释一下。从本质上讲,Promise 对象表示异步操作的最终完成或失败。

Async/Await替代Promise的6个理由

Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。

剖析Promise内部结构,一步一步实现一个完整的、能通过所有Test case的Promise类

本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.

为promise增加abort功能

Promise只有三种状态:pending、resolve、reject,一个异步的承诺一旦发出,经历等待(pending)后,最终只能为成功或者失败,中途无法取消(abort)。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!