使用 ES11 中的 Promise.allSettled 处理 async/await 异常，从而避免 Promise.all 错误

随着 JavaScript 语言的不断发展，前端领域的代码也变得越来越复杂。为了保证代码的可维护性和可读性，我们采用了 ES6 中的 async/await 来优化异步编程。但是在实际开发中，我们会经常遇到一些异步操作失败的情况，这时候我们需要处理这些异常情况，避免代码崩溃。而在处理多个异步操作时，使用 Promise.all 可能会抛出异常，导致代码出错。因此，在 ES11 中，Promise.allSettled 作为 Promise.all 的一个替代方法，提供了更好的错误处理方式。

Promise.all 和 Promise.allSettled 的区别

在了解 Promise.allSettled 的处理方式之前，我们需要先了解一下 Promise.all 和 Promise.allSettled 的区别。使用 Promise.all 时，如果其中任何一个 Promise 被 reject，则整个 Promise.all 被 reject，这可能导致整个应用程序的崩溃。而使用 Promise.allSettled，则会始终返回结果，即使其中几个 Promise 失败，也不会使整个 Promise.allSettled 抛出异常。

使用 Promise.allSettled 处理 async/await 异常

在实际开发中，我们经常会遇到需要同时处理多个异步操作的情况。比如我们需要获取多个接口的数据，然后在处理完毕后将数据渲染到界面上。以下就是一个使用 Promise.all 处理异步操作的示例代码：

const fetchList = async () => {
  try {
    const [list1, list2] = await Promise.all([
      fetch('/api/list1').then(res => res.json()),
      fetch('/api/list2').then(res => res.json()),
    ])
    // do something with data
  } catch (error) {
    console.error("Fetch list error: ", error);
  }
}

上面的代码使用了 ES6 中的 async/await 和 Promise.all，如果其中一个 Promise 被 reject 就会抛出异常。在这种情况下，我们可以使用 Promise.allSettled 来处理异常：

const fetchList = async () => {
  try {
    const [list1, list2] = await Promise.allSettled([
      fetch('/api/list1').then(res => res.json()),
      fetch('/api/list2').then(res => res.json()),
    ])
    const [resolvedList1, resolvedList2] = [list1, list2].flatMap((result) => {
      if(result.status === 'fulfilled') {
        return result.value;
      } else {
        console.error(`Fetch ${result.reason.url} error: `, result.reason);
        return [];
      }
    });
    // do something with data
  } catch (error) {
    console.error("Fetch list error: ", error);
  }
}

上面的代码使用了 async/await 和 Promise.allSettled，即使有 Promise 被 reject，代码仍会继续执行。我们使用了 flatMap 来处理 Promise.allSettled 的结果，将 resolved 和 rejected 的结果分别处理。对于 rejected 的 Promise，我们可以在 console 中输出错误信息。这样我们就可以在多个异步操作中灵活地处理错误，并避免 Promise.all 所带来的代码异常问题。

总结

在使用 async/await 处理异步操作时，我们需要注意代码的错误处理，避免 Promise.all 带来的异常问题。在 ES11 中，我们可以使用 Promise.allSettled 更安全地处理多个异步操作，并在发生错误时提供更好的错误提示。在实际开发中，我们应该灵活选择 Promise.all 和 Promise.allSettled，并根据具体情况选择合适的处理方式，为保证代码的可维护性和可读性。

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