在 ES11 中，使用 Promise.allSettled 来解决多条请求的问题

在前端开发中，我们经常需要向后端发起多条请求，然后等待所有请求都完成后再进行下一步操作。在 ES6 中，我们可以使用 Promise.all 方法来实现这个功能。但是，如果其中一条请求失败了，Promise.all 就会直接抛出异常，导致其他请求也无法继续执行。这时候，ES11 中新增的 Promise.allSettled 方法就可以派上用场了。

Promise.allSettled 的用法

Promise.allSettled 方法接收一个 Promise 数组作为参数，并返回一个新的 Promise。该 Promise 在所有传入的 Promise 都执行完毕后才会被 resolve，resolve 的结果是一个数组，数组中的每一项都是一个对象，表示对应的 Promise 的执行结果。

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
  });

其中，results 数组的每一项包含以下两个属性：

• status：表示 Promise 的状态，可能的值为 "fulfilled" 或 "rejected"。
• value 或 reason：表示 Promise 的执行结果，如果状态为 "fulfilled"，则为 Promise 的 resolve 值，如果状态为 "rejected"，则为 Promise 的 reject 值。

Promise.allSettled 的指导意义

使用 Promise.allSettled 可以让我们更好地处理多条请求的情况。不管其中有多少条请求失败了，我们都可以在所有请求都执行完毕后进行下一步操作，而不用担心异常的抛出。

另外，在 Promise.allSettled 的回调函数中，我们可以遍历 results 数组，根据每个 Promise 的状态来进行不同的处理。比如，我们可以将所有成功的请求的结果合并起来，再将所有失败的请求的错误信息一起输出。

Promise.allSettled 的示例代码

下面是一个简单的示例，展示了如何使用 Promise.allSettled 处理多条请求的情况。

// www.javascriptcn.com code example
const fetchUsers = fetch('https://jsonplaceholder.typicode.com/users');
const fetchPosts = fetch('https://jsonplaceholder.typicode.com/posts');
const fetchComments = fetch('https://jsonplaceholder.typicode.com/comments');

Promise.allSettled([fetchUsers, fetchPosts, fetchComments])
  .then(results => {
    const users = [];
    const posts = [];
    const comments = [];
    const errors = [];

    results.forEach(result => {
      if (result.status === 'fulfilled') {
        const value = result.value;
        if (value.url === 'https://jsonplaceholder.typicode.com/users') {
          users.push(...value.json());
        } else if (value.url === 'https://jsonplaceholder.typicode.com/posts') {
          posts.push(...value.json());
        } else if (value.url === 'https://jsonplaceholder.typicode.com/comments') {
          comments.push(...value.json());
        }
      } else if (result.status === 'rejected') {
        errors.push(result.reason);
      }
    });

    console.log('users:', users);
    console.log('posts:', posts);
    console.log('comments:', comments);
    console.log('errors:', errors);
  });

在这个示例中，我们向三个不同的地址发起了三条请求，并使用 Promise.allSettled 方法等待它们全部完成。然后，我们遍历 results 数组，将每个 Promise 的执行结果分类处理，最后将所有成功的请求的结果输出到控制台，并将所有失败的请求的错误信息输出到控制台。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d26ff7a941bf713449318f