Promise.all() 方法详解

Promise.all() 是 JavaScript 中用于处理多个 Promise 的一个非常有用的方法，它允许你并行处理多个异步操作，并在所有操作都完成后得到一个统一的结果。以下是关于 Promise.all() 方法的详细解释：

语法

Promise.all(iterable);

• 参数：iterable 是一个可迭代对象，例如数组，其中每个元素都应该是一个 Promise 对象。如果元素不是 Promise，会被自动转换为已解决（resolved）的 Promise。
• 返回值：Promise.all() 方法返回一个新的 Promise 对象。
  • 当 iterable 中所有的 Promise 都成功解决（resolved）时，返回的 Promise 会以一个包含所有 Promise 结果的数组来解决，数组中结果的顺序与 iterable 中 Promise 的顺序一致。
  • 当 iterable 中有任何一个 Promise 被拒绝（rejected）时，返回的 Promise 会立即以该 Promise 的拒绝原因来拒绝，不再等待其他 Promise 完成。

示例代码

所有 Promise 都成功解决的情况

// 模拟异步操作的函数
function asyncOperation(value, delay) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(value);
        }, delay);
    });
}

// 创建多个 Promise
const promise1 = asyncOperation('结果1', 1000);
const promise2 = asyncOperation('结果2', 2000);
const promise3 = asyncOperation('结果3', 1500);

// 使用 Promise.all 处理多个 Promise
Promise.all([promise1, promise2, promise3])
   .then((results) => {
        console.log('所有 Promise 都已成功解决：', results);
    })
   .catch((error) => {
        console.error('有 Promise 被拒绝：', error);
    });

在这个示例中，我们创建了三个模拟异步操作的 Promise，并使用 Promise.all() 来并行处理它们。由于所有的 Promise 都成功解决，Promise.all() 返回的 Promise 会以一个包含所有结果的数组来解决，最终输出结果为 ['结果1', '结果2', '结果3']。

有 Promise 被拒绝的情况

// 模拟异步操作的函数
function asyncOperation(value, delay, shouldReject = false) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (shouldReject) {
                reject(new Error(`操作 ${value} 失败`));
            } else {
                resolve(value);
            }
        }, delay);
    });
}

// 创建多个 Promise，其中一个会被拒绝
const promise1 = asyncOperation('结果1', 1000);
const promise2 = asyncOperation('结果2', 2000, true); // 这个 Promise 会被拒绝
const promise3 = asyncOperation('结果3', 1500);

// 使用 Promise.all 处理多个 Promise
Promise.all([promise1, promise2, promise3])
   .then((results) => {
        console.log('所有 Promise 都已成功解决：', results);
    })
   .catch((error) => {
        console.error('有 Promise 被拒绝：', error.message);
    });

在这个示例中，promise2 会被拒绝，当 Promise.all() 检测到 promise2 被拒绝时，它会立即以 promise2 的拒绝原因来拒绝，不再等待 promise1 和 promise3 完成，最终会输出错误信息 有 Promise 被拒绝： 操作 结果2 失败。

使用场景

• 并行加载资源：当需要同时加载多个资源（如图片、数据等）时，可以使用 Promise.all() 来等待所有资源加载完成。
• 批量数据处理：在处理多个异步数据请求时，可以将这些请求封装成 Promise，并使用 Promise.all() 来统一处理结果。

注意事项

• 由于 Promise.all() 是并行处理多个 Promise 的，因此如果其中一个 Promise 耗时很长，会影响整体的完成时间。
• 当 Promise.all() 中有 Promise 被拒绝时，其他正在进行的 Promise 仍然会继续执行，只是 Promise.all() 返回的 Promise 会立即被拒绝。