第二,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-resolved-yyc0l?file=/src/index.js
Promise.allSettled([...])
返回一个 promise statusesPromise
,该 promise 在1秒内解决,就在蔬菜和水果被解决之后,并行地解决。
statusesPromise
解析为一个包含状态的数组。
-
数组的第一项包含有蔬菜的已完成状态:
status: 'fulfilled', value: ['potatoes', 'tomatoes'] }
-
同样的方式,第二项是水果的完成状态:
{ 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-rejected-ij3uo?file=/src/index.js
Promise.allSettled([...])
返回的 promise 在 1
秒后解析为一个状态数组:
-
数组的第一项,蔬菜
promise
成功解析:{ status: 'fulfilled', value: ['potatoes', 'tomatoes'] }
-
第二项,因为水果 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’, reas 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 on: Error(‘Out of vegetables!’) },
// { status: ‘rejected’, reason: Error(‘Out of fruits!’) }
// ]
线上事例:https://codesandbox.io/s/all-rejected-z4jee?file=/src/index.js
在这种情况下,statusesPromise
仍然成功地解析为一个状态数组。然而,该数组包含被拒绝的promise 的状态。
[](()3.总结
Promise.allSettled(promises)
可以并行地运行 promise,并将状态(fulfilled 或reject)收集到一个聚合数组中。
Promise.allSettled(...)
在你需要执行平行和独立的异步操作并收集所有结果时非常有效,即使某些异步操作可能失败。
~~ 完,我是刷碗智,你们的点赞及在看是对我刷碗最大的认可。
编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug](()。