36 - 新的 Promise 方法：allSettled & any & race

简介

在之前的两篇文章中，我们已经覆盖了基础和高级的 promise 知识。还有两个不错的新操作符/方法，可以是代码更简洁，让我们一起来重温下它们。

allSettled

ES2020 或 ES11 引入了 promise.allSettled，所以它是很新的方法所以使用的时候需要当心。使用之前需要确定你要支持的浏览器版本。

当所有的 promise 返回不管是成功还是失败，allSettled 都会返回一个 promise。返回值是一个对象数组，其中每一项描述了输入 promise 的返回值。

allSettled 和 all 有一些区别。

all 会返回输入的 promise 中第一个是失败的结果，所以如果我们输入了 5 个 promise 其中两个失败了，all 会返回第一个失败的结果。

allSettled 则会等待所有的 promise 完成然后返回所有按输入顺序对应的结果。当异步的任务彼此没有依赖关系使用 allSettled 然后重试失败的任务。若你的执行步骤依赖所有的异步任务则使用 all。

const promise1 = Promise.resolve("Parwinder");
const promise2 = new Promise((resolve) => {setTimeout(() => {resolve("Lauren");}, 2000);
});
const promise3 = Promise.reject("Robert");
const promise4 = Promise.resolve("Eliu");

Promise.allSettled([promise1, promise2, promise3, promise4]).then((data) => {console.log(data);
}); 
1
2
3
4
5
6
7
8

上面四个任务一旦都结束（成功或失败），allSettled 则会向 then 的回调函数中传递结果，打印如下：

[{status: "fulfilled",value: "Parwinder"
}, {status: "fulfilled",value: "Lauren"
}, {reason: "Robert",status: "rejected"
}, {status: "fulfilled",value: "Eliu"
}] 
1
2
3
4
5

any

any 的输入参数一般是可迭代对象比如数组，它返回数组中第一个成功 promise 的结果，若所有的 promise 都失败则返回 AggregateError ，AggregateError 是用来组合输入 promise 返回的独立错误。

any 与 all 是相对的。

const promise1 = Promise.resolve("Parwinder");
const promise2 = new Promise((resolve) => {setTimeout(() => {resolve("Lauren");}, 2000);
});
const promise3 = Promise.reject("Robert");
const promise4 = Promise.resolve("Eliu");

Promise.any([promise1, promise2, promise3, promise4]).then((data) => {console.log(data); // Parwinder (first successful promise)
}); 
1
2
3
4
5
6
7
8

假设所有的 promise 都返回错误：

const promise1 = Promise.reject("Parwinder");
const promise2 = new Promise((resolve,reject) => {setTimeout(() => {reject("Lauren");}, 2000);
});
const promise3 = Promise.reject("Robert");
const promise4 = Promise.reject("Eliu");

Promise.any([promise1, promise2, promise3, promise4]).then((data) => {console.log(data); // "AggregateError: No Promise in Promise.any was resolved"
}); 
1
2
3
4
5
6
7
8

race

race 会返回第一个成功或失败 promise 的结果。

const promise1 = new Promise((resolve, reject) => {setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {console.log(value);// Both resolve, but promise2 is faster
});
// expected output: "two" 
1
2
3
4
5
6
7
8
9

若传递给 race 的参数为空数组，则永远不会有结果：

var foreverPendingPromise = Promise.race([]);
console.log(foreverPendingPromise);
setTimeout(function(){console.log('the stack is now empty');console.log(foreverPendingPromise);
});

// logs, in order:
// Promise { : "pending" }
// the stack is now empty
// Promise { : "pending" } 
1
2
3
4
5
6
7
8
9