如何避免在使用 Promise.all() 时引起的错误？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 Promise.all() 可以同时执行多个异步操作，当所有操作都完成后，返回一个包含所有操作结果的数组。但是，如果不注意使用方式，可能会引起错误。本文将介绍如何避免在使用 Promise.all() 时引起的错误。

问题描述

假设有以下代码：

// javascriptcn.com 代码示例
const promises = [
  fetch('/api/data1'),
  fetch('/api/data2'),
  fetch('/api/data3')
];

Promise.all(promises)
  .then(results => {
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });

这段代码会同时请求三个接口，当所有接口请求完成后，将结果打印到控制台上。但是，如果其中一个请求失败了，会导致整个 Promise.all() 失败，进入 catch 分支。这时，如果我们希望能够继续请求其他接口，就需要对这种情况进行处理。

解决方案

方案一：忽略错误

我们可以使用 Promise.allSettled() 方法，它会等待所有 Promise 对象都完成，不管它们是成功还是失败，最终返回一个包含所有 Promise 对象状态的数组。这种方式可以忽略错误，继续执行其他操作。

Promise.allSettled(promises)
  .then(results => {
    console.log(results);
  });

当某个请求失败时，结果数组中对应的对象会包含一个 status 属性，值为 'rejected'，并且会有一个 reason 属性，保存了错误信息。

方案二：处理错误

如果我们希望在某个请求失败时，终止其他请求，并且返回错误信息，可以使用 Promise.race() 方法。这个方法会等待所有 Promise 对象中的任意一个完成，无论成功还是失败，都会进入 then 分支或 catch 分支。

// javascriptcn.com 代码示例
Promise.all(promises.map(p => p.catch(e => e)))
  .then(results => {
    const errors = results.filter(r => r instanceof Error);
    if (errors.length > 0) {
      throw errors[0];
    }
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });

这段代码中，我们首先对每个 Promise 对象使用 .catch() 方法捕获错误，将其转换为一个成功的 Promise 对象，这样即使其中一个请求失败了，也不会导致整个 Promise.all() 失败。然后，我们在 then 分支中检查返回结果中是否有错误信息，如果有，就抛出第一个错误信息，进入 catch 分支处理。

总结

在使用 Promise.all() 方法时，需要注意错误处理。如果希望继续执行其他操作，可以使用 Promise.allSettled() 方法；如果希望在错误发生时终止其他操作，可以使用 Promise.race() 方法。需要注意的是，Promise.race() 方法只能处理第一个错误，如果有多个错误，只会处理第一个错误。因此，在实际开发中，需要根据具体情况进行选择。

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