如何使用 ES10 中的 Promise.allSettled() 方法实现并行请求

在前端开发中，我们常常需要同时发起多个请求，以提高页面的性能和用户体验。ES10 中的 Promise.allSettled() 方法可以帮助我们实现并行请求，提高代码的可读性和可维护性。

Promise.all() 方法和 Promise.allSettled() 方法的区别

在介绍 Promise.allSettled() 方法之前，我们先来了解一下 Promise.all() 方法。

Promise.all() 方法用于将多个 Promise 实例包装成一个新的 Promise 实例，当所有的 Promise 实例都成功时，返回的 Promise 实例才会成功；当其中任意一个 Promise 实例失败时，返回的 Promise 实例就会失败。

const promise1 = Promise.resolve('Hello');
const promise2 = Promise.resolve('World');
const promise3 = Promise.reject(new Error('Oops!'));

Promise.all([promise1, promise2])
  .then(values => console.log(values)) // ['Hello', 'World']
  .catch(error => console.error(error));

Promise.all([promise1, promise3])
  .then(values => console.log(values))
  .catch(error => console.error(error)); // Error: Oops!

Promise.allSettled() 方法也用于将多个 Promise 实例包装成一个新的 Promise 实例，不同的是，返回的 Promise 实例不会失败，而是会等待所有的 Promise 实例都 settled（即 fulfilled 或 rejected）后返回一个包含所有 Promise 实例状态的数组。

const promise1 = Promise.resolve('Hello');
const promise2 = Promise.resolve('World');
const promise3 = Promise.reject(new Error('Oops!'));

Promise.allSettled([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error));
// [
//   { status: 'fulfilled', value: 'Hello' },
//   { status: 'fulfilled', value: 'World' },
//   { status: 'rejected', reason: Error: Oops! }
// ]

实现并行请求

使用 Promise.allSettled() 方法可以方便地实现并行请求，下面是一个简单的示例：

const urls = ['https://jsonplaceholder.typicode.com/todos/1', 'https://jsonplaceholder.typicode.com/todos/2', 'https://jsonplaceholder.typicode.com/todos/3']

Promise.allSettled(urls.map(url => fetch(url)))
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value.json());
      } else {
        console.error(result.reason);
      }
    });
  })
  .catch(error => console.error(error));

在这个示例中，我们首先定义了一个包含多个 URL 的数组，然后使用 map() 方法将每个 URL 转换成一个 fetch() 请求，并将所有请求的 Promise 实例传递给 Promise.allSettled() 方法。最后，我们可以遍历返回的结果数组，根据每个 Promise 实例的状态来处理响应数据或错误信息。

总结

使用 ES10 中的 Promise.allSettled() 方法可以方便地实现并行请求，提高代码的可读性和可维护性。我们可以将多个 Promise 实例传递给 Promise.allSettled() 方法，等待所有实例都 settled 后处理返回的结果数组。这个方法在实际开发中非常常用，建议掌握并灵活运用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658be39aeb4cecbf2d12ea00