在前端开发中，经常会有需要发起多个网络请求的场景，例如在一次页面加载中需要获取多个 API 的数据。然而，这样的设计很容易带来一些问题，例如性能和用户体验问题。在这篇文章中，我们将介绍如何使用 Promise.any 来优化这样的需求。
问题描述
假设我们需要获取两个不同 API 的数据：
-- -------------------- ---- ------- ----- ---- - --------------------------- ----- ---- - --------------------------- --------------------------- -- - ------ ---------------- -------------- -- - -- ------ ---- ---- --- --------------------------- -- - ------ ---------------- -------------- -- - -- ------ ---- ---- ---
在上述代码中，我们使用了 fetch() 函数来获取两个不同 API 的数据，然后在每个请求的 then() 回调函数中处理数据。但是，这样的实现有一个明显的问题：它会等待所有的网络请求都结束后，才会开始处理数据。这种实现方式会带来很长的等待时间和用户体验问题。
Promise.any 介绍
Promise.any() 是 Promise API 的一个新方法，它可以解决多个 Promise 对象的问题。该方法接收一个 Promise 对象数组作为参数，返回 Promise 对象，解决方式为：只要任何一个 Promise 对象成功完成，就会返回对应的值。
使用 Promise.any() 可以使代码更加简洁，例如：
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('error');
const promise3 = Promise.resolve(3);
Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value)) // value is 1
.catch((error) => console.log(error)); // No Promise in Promise.any was fulfilled and all promises were rejected在上述代码中，我们使用了 Promise.any() 方法，并传入了一个 Promise 对象数组。如果最终有任意一个 Promise 对象成功完成，就会返回对应的值，否则会返回错误信息。
使用 Promise.any
回到原始问题，我们现在已经学习了如何使用 Promise.any() 来解决多个网络请求的问题。具体实现方式如下：
-- -------------------- ---- ------- ----- ---- - --------------------------- ----- ---- - --------------------------- ----- -- - --------------------------- -- - ------ ---------------- --- ----- -- - --------------------------- -- - ------ ---------------- --- ---------------- ------------------- -- - -- ------ ---- --------------------- ---------------- -- - -- ------ ----- ------------------- ---
在上述代码中，我们使用 Promise.any() 来异步获取多个 API 的数据，然后在回调函数中对数据进行处理。在每个 fetch() 请求中，我们将数据转换成 JSON 格式，然后将其作为一个 Promise 对象返回。最后，我们使用 Promise.any() 来同时处理这两个 Promise 对象，一旦它们中的任意一个完成，就会返回对应的值。
总结
在本文中，我们介绍了如何使用 Promise.any() 来优化多个网络请求的场景。相比于原始实现方式，使用 Promise.any() 这种优化方案可以更快地获取到数据，并且能够提升用户体验。最后，我们也提醒您使用 Promise.any() 的小细节，例如传入的 Promise 对象数组为空时会报错，需要在代码中作出相应处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ca734968c7c53b07a2b08