需求场景
有时候,我们希望等到一组异步操作都结束了,不管每一个操作是成功还是失败,再进行下一步操作。但是,现有的 Promise
方法很难实现这个要求。
Promise.all()
方法只适合所有异步操作都成功的情况,如果有一个操作失败,就无法满足要求。
const urls = [url_1, url_2, url_3];
const requests = urls.map(x => fetch(x));
try {
await Promise.all(requests);
console.log('所有请求都成功。');
} catch {
console.log('至少一个请求失败,其他请求可能还没结束。');
}
上面示例中,Promise.all()
可以确定所有请求都成功了,但是只要有一个请求失败,它就会报错,而不管另外的请求是否结束。
认识Promise.allSettled
- 为了解决这个问题,
ES2020
引入了Promise.allSettled()
方法,用来确定一组异步操作是否都结束了(不管成功或失败)。所以,它的名字叫做”Settled
“,包含了”fulfilled
“和”rejected
“两种情况。 Promise.allSettled()
方法接受一个数组作为参数,数组的每个成员都是一个Promise
对象,并返回一个新的Promise
对象。只有等到参数数组的所有Promise
对象都发生状态变更(不管是fulfilled
还是rejected
),返回的Promise
对象才会发生状态变更。
const promises = [
fetch('/api-1'),
fetch('/api-2'),
fetch('/api-3'),
];
await Promise.allSettled(promises);
removeLoadingIndicator();
上面示例中,数组promises
包含了三个请求,只有等到这三个请求都结束了(不管请求成功还是失败),removeLoadingIndicator()
才会执行。
该方法返回的新的 Promise
实例,一旦发生状态变更,状态总是fulfilled
,不会变成rejected
。状态变成fulfilled
后,它的回调函数会接收到一个数组作为参数,该数组的每个成员对应前面数组的每个 Promise
对象。
const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.allSettled([resolved, rejected]);
allSettledPromise.then(function (results) {
console.log(results);
});
// [
// { status: 'fulfilled', value: 42 },
// { status: 'rejected', reason: -1 }
// ]
上面代码中,Promise.allSettled()
的返回值allSettledPromise
,状态只可能变成fulfilled
。它的回调函数接收到的参数是数组results
。该数组的每个成员都是一个对象,对应传入Promise.allSettled()
的数组里面的两个 Promise
对象。