乐趣区

关于前端:什么是-PromiseallSettled-新手老手都要会

jiezi

作者：Dmitri Pavlutin
译者：前端小智
起源：dmitripavluti

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

Promise.allSettled() 办法返回一个在所有给定的 promise 都曾经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象示意对应的 promise 后果。

接着，咱们来看看 Promise.allSettled() 是如何工作的。

1. Promise.allSettled()

Promise.allSettled() 可用于并行执行独立的异步操作，并收集这些操作的后果。

该函数承受一个 promise 数组 (通常是一个可迭代对象) 作为参数:

const statusesPromise = Promise.allSettled(promises);

当所有的输出 promises 都被 fulfilled 或 rejected 时，statusesPromise 会解析为一个具备它们状态的数组

  1. {status: 'fulfilled', value: value} — 如果对应的 promise 曾经 fulfilled
  2. 或者 {status: 'rejected'，reason: reason} 如果相应的 promise 曾经被 rejected

在解析所有 promises 之后，能够应用 then 语法提取它们的状态:

statusesPromise.then(statuses => {statuses; // [{ status: '...', value: '...'}, ...]
});

或者应用 async/await 语法：

const statuses = await statusesPromise;
statuses; // [{status: '...', value: '...'}, ...]

2. 取水果和蔬菜

在深入研究 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()。

2.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'] }
// ]

线上事例：https://codesandbox.io/s/all-…

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

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

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

2.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!') }
// ]

线上事例：https://codesandbox.io/s/one-…

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

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

即便输出数组中的第二个 promise 被回绝，statusesPromise依然会胜利解析一个状态数组。

2.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!') }
// ]

线上事例：https://codesandbox.io/s/all-…

在这种状况下，statusesPromise依然胜利地解析为一个状态数组。然而，该数组蕴含被回绝的 promise 的状态。

3. 总结

Promise.allSettled(promises)能够并行地运行 promise，并将状态（fulfilled 或 reject）收集到一个聚合数组中。

Promise.allSettled(...)在你须要执行平行和独立的异步操作并收集所有后果时十分无效，即便某些异步操作可能失败。

~~ 完，我是刷碗智，你们的点赞及在看是对我刷碗最大的认可。

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://dmitripavlutin.com/pr…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

退出移动版