Promise.all 使用及错误处理详解-JavaScript中文网-JavaScript教程资源分享门户

Promise.all() 是我们在前端开发中常常需要使用的一个方法，它可用于并行地处理多个异步任务，并在它们全部完成后返回一个解析后的数组结果。但如果我们不注意使用细节，会导致一些意外的错误发生。因此，在本文中，我们将详细讲解 Promise.all() 的使用及错误处理方法。

Promise.all() 的使用

Promise.all() 是一个能够接收一个包含多个 Promise 的可迭代对象（比如数组）的方法。它的语法如下：

Promise.all(iterable)

其中，iterable 是一个包含多个 Promise 的可迭代对象。

我们来看一个例子：

const promise1 = new Promise(resolve => setTimeout(resolve, 3000, 'foo'));
const promise2 = 42;
const promise3 = new Promise(resolve => setTimeout(resolve, 1000, 'bar'));

Promise.all([promise1, promise2, promise3])
  .then(([result1, result2, result3]) => console.log([result1, result2, result3]));

这个例子中，我们设置了 3 个 Promise，其中 promise1 和 promise3 分别会在 3 秒和 1 秒后返回不同的结果。而 promise2 直接返回值 42。最终，通过 Promise.all() 方法将这三个 Promise 组合在一起，并在它们全部返回结果后打印出一个包含三个结果的数组。

Promise.all() 的注意点

下面，我们讲解一下在使用 Promise.all() 方法时需要注意的几个地方。

1. 参数必须是可迭代对象

Promise.all() 方法只接受一个可迭代对象为参数，如果传入的参数不是可迭代对象，会抛出 TypeError 异常。

Promise.all(666) // TypeError: The argument is not iterable

2. 非 Promise 会被自动转换成 Promise

在传递进 Promise.all() 的可迭代对象中，如果其中有一个值不是 Promise，它也会被包装成 Promise。也就是说，无论是可迭代对象中的值是 Promise 还是非 Promise，最终传递给 Promise.all() 方法的都是 Promise。

Promise.all([Promise.resolve(42), 666, 'foo']) // 返回一个包含一个 Promise 的数组

3. 处理中断情况

如果传递给 Promise.all() 方法的可迭代对象中有一个 Promise 被拒绝（rejected），那么这个方法将立即返回一个拒绝（rejected）状态的 Promise，而且它的返回值是和这个被拒绝的 Promise 相同的原因。

const promise1 = Promise.reject(new Error('foo'));
const promise2 = Promise.resolve('bar');

Promise.all([promise1, promise2]).catch(error => console.log(error)); // Error: foo

在这个例子中，promise1 被拒绝，并返回一个错误对象。因此，最终返回的 Promise 也将立即被拒绝，并返回相同的错误消息。

Promise.all() 的错误处理

在使用 Promise.all() 时，错误处理是非常重要的一部分。下面，我们将共同探讨如何正确地处理 Promise.all() 的错误。

1. Promise.all() 异常处理

首先，我们要知道 Promise.all() 本身并不会抛出任何异常。所有的异常都会被转换成 Promise 的 reject 值，并返回拒绝的 Promise。因此，如果要捕获 Promise.all() 抛出的异常，我们需要使用 Promise.catch() 方法。

Promise.all([Promise.resolve(42), Promise.reject(new Error('foo')), Promise.resolve('bar')])
  .then(results => console.log(results))
  .catch(error => console.log(error));

在这个示例中，向 Promise.all() 传了 3 个 Promise，其中包括一个被拒绝的 Promise。在使用 then() 方法获取结果时，由于发生了异常，所以我们使用了 catch() 方法来捕获异常。

2. 可中断的 Promise.all()

Promise.all() 本身没有提供一种方法能够中断正在等待的 Promise，这会导致一些问题。比如，如果等待时间太久，这可能会影响用户体验。在这种情况下，我们可以模拟一个可中断的 Promise.all() 方法。

// www.javascriptcn.com code example
function PromiseAll(promises) {
  return new Promise((resolve, reject) => {
    const result = new Array(promises.length);
    let count = 0;

    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(res => {
          result[index] = res;
          ++count === promises.length && resolve(result);
        })
        .catch(error => reject(error));
    });

    setTimeout(() => reject(new Error('Promise timeout')), 5000);
  });
}

const promise1 = new Promise(resolve => setTimeout(resolve, 2900, 42));
const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'foo'));
const promise3 = new Promise(resolve => setTimeout(resolve, 1000, 'bar'));

PromiseAll([promise1, promise2, promise3]).then(results => console.log(results)).catch(error => console.log(error));

在该示例中，我们实现了一个名为 PromiseAll 的方法，它在传入的 3 个 Promise 所组成的数组中等待 5 秒钟。如果在该时间之内，Promise 被解析，则返回所有的结果。如果有一个 Promise 被拒绝，则立即拒绝整个 Promise。如果在 5 秒后尚未完成任何一个 Promise，则直接拒绝整个 Promise。

这个方法解决了等待时间过长的问题，并且对异常和拒绝的 Promise 也进行了处理。

结语

Promise.all() 是一个在前端开发中非常常见的方法，掌握好它的使用及错误处理方法可以避免许多不必要的错误。我们在这篇文章中，介绍了 Promise.all() 的基本使用方法和注意点，还详细讲解了错误处理的相关技巧。希望这篇文章对你的学习和工作有所帮助。

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

Promise.all 使用及错误处理详解