在 JavaScript 的异步编程中，promise 是一种非常强大的工具，它能够解决回调地狱等异步编程中的难点。在 ECMAScript 2021 (ES12) 中，Promise.any() 方法被引入，它可以让我们更好地管理多个异步操作。本文将详细地介绍 Promise.any() 的使用场景以及示例代码，帮助读者更好地理解这一新特性。
Promise.any() 简介
Promise.any() 方法可以接受多个 Promise 对象，并返回第一个 fulfilled 状态的 Promise 的值。如果所有 Promise 都是 rejected 状态，则返回一个 AggregateError 对象，该对象包含了所有 Promise 的 reject 值。这一特性非常有用，在处理多个异步请求时会更方便。
Promise.any() 的语法如下：
Promise.any(iterable);
其中，iterable 表示一个可迭代对象，具体可以是一个数组、一个 Map 对象、一个 Set 对象等。
Promise.any() 的使用场景
类似于 Promise.race() 的场景
Promise.race() 方法和 Promise.any() 方法很相似，它们都会返回多个 Promise 中最快的那个。但是在处理多个异步操作时，更多的情况下我们需要知道最先 resolved 的 Promise 的值，而不是最先 fulfilled 的 Promise 的值。下面是一个使用 Promise.race() 的场景：
const p1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'foo')); const p2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, 'bar')); Promise.race([p1, p2]).then(result => console.log(result)); // 输出 "foo"
假设我们请求了两个接口数据（p1 和 p2），并希望得到一个更快的结果。如果 p1 的响应速度很快，它将解析为 fulfilled 状态，那么我们将获得该接口的数据。但是，如果 p1 的响应速度慢，p2 更快，则我们将获得 p2 的值。这种方式看起来很好，但是它有一个问题：如果 p1（或 p2）在接口请求时返回了一个 error 状态，它将变为 rejected 状态，那么 Promise.race() 方法将会采用它的值，因此我们将得到一个错误值。这并不是我们期望的结果。
Promise.any() 方法提供了一个更好的选择，它将返回其中一个 Promise 对象的 value，而不仅仅是最快的 Promise 对象的 value。下面是 Promise.any() 的示例代码：
const p1 = new Promise((resolve, reject) => setTimeout(reject, 1000, 'foo error')); const p2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, 'bar')); Promise.any([p1, p2]).then(result => console.log(result)); // 输出 "bar"
上面的代码将输出定时 1000 毫秒后返回的错误信息 ‘foo error’。那我们该如何处理 p1 返回错误状态的情况呢？我们可以结合 Promise.catch() 方法，对捕捉到的 AggregateError 对象中的 reject 值进行处理：
const p1 = new Promise((resolve, reject) => setTimeout(reject, 1000, 'foo error'));
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, 'bar'));
Promise.any([p1, p2])
.then(result => console.log(result))
.catch(errors => {
console.log(errors)
// 输出 包含 p1 的错误消息的 AggregateError 对象
});转换多个错误消息
当我们使用 Promise.all() 方法或其他方法来并行请求多个数据时，可能会出现一些错误，这些错误需要进行转换、合并或处理。此时可以使用 Promise.any() 方法来转换错误消息，如下所示：
-- -------------------- ---- -------
----- -- - -- -- ------------------ ------------ -----
----- -- - -- -- ------------------ ------------ -----
----- -- - -- -- ------------------------ ----
------------------ ----- ------
----------- -- -------------------
------------- -- -
----- --------- - ------------------ ----- -- ---------------
-----------------------------------
-- -- ------ - -- ----- --
---在上面的示例代码中，我们同时请求了三个方法，其中 f1 和 f2 均返回错误状态，f3 返回成功状态。通过使用 Promise.any() 方法，当 f3 返回成功状态时，我们将得到 f3 的 value。但是，当 f1 和 f2 返回错误状态时，我们可以将错误消息转换为一个字符串 list 进行输出（注意：此处的 Array.from() 方法是用来将 AggregateError 对象转化为数组，然后使用 map() 方法取出每个错误的 message 属性，并最终将所有错误的 message 属性以换行符拼接起来，输出错误信息）。
总结
本文详细地介绍了 ECMAScript 2021 (ES12) 中的 Promise.any() 方法，包括其基本语法、使用场景以及示例代码。Promise.any() 方法使得处理多个异步请求更为方便和灵活，并且可以避免一些通过 Promise.race() 方法带来的问题。掌握 Promise.any() 方法对于一个前端开发工程师来说非常有必要，它可以帮助我们更好地开发异步编程，并且提高编程效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fea09095b1f8cacdd569ba