前言
在前端开发中，异步编程是非常常见的。而 Promise 是 ES6 中新增的一种异步编程方式，它能够让异步编程变得更加简洁、优雅。Promise.all 和 Promise.race 是 Promise 中的两个非常重要的方法，它们可以帮助我们更好地管理异步任务，提高代码的性能和可维护性。本文将详细介绍 Promise.all 和 Promise.race 的用法及注意事项。
Promise.all
Promise.all 方法接收一个由 Promise 对象组成的数组作为参数，返回一个新的 Promise 对象。当数组中所有的 Promise 对象都成功完成时，Promise.all 返回的 Promise 对象才会成功完成。如果数组中任意一个 Promise 对象失败或抛出异常，Promise.all 返回的 Promise 对象则会失败。
示例代码
// www.javascriptcn.com code example
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
}, 1000);
});
Promise.all([promise1, promise2, promise3])
.then((values) => {
console.log(values); // [1, 2, 3]
})
.catch((error) => {
console.error(error);
});在上面的示例代码中，我们创建了三个 Promise 对象。promise1 和 promise2 分别使用 Promise.resolve 方法创建，并且它们的状态都是已完成的。promise3 是一个异步操作，需要等待 1 秒钟后才会成功完成。接着，我们使用 Promise.all 方法将这三个 Promise 对象放入一个数组中，并调用 then 方法来处理 Promise.all 返回的 Promise 对象。当数组中所有的 Promise 对象都成功完成时，Promise.all 返回的 Promise 对象才会成功完成，此时它的值为一个数组，包含了所有 Promise 对象的返回值。如果数组中任意一个 Promise 对象失败或抛出异常，Promise.all 返回的 Promise 对象则会失败。
注意事项
- Promise.all 方法接收的参数必须是一个数组，否则会抛出 TypeError 错误。
- 如果数组中有一个 Promise 对象失败或抛出异常，Promise.all 返回的 Promise 对象则会失败，此时它的值为失败的 Promise 对象的返回值。
- 如果数组中的 Promise 对象有一个永远处于 pending 状态，Promise.all 将永远不会返回。
Promise.race
Promise.race 方法接收一个由 Promise 对象组成的数组作为参数，返回一个新的 Promise 对象。当数组中有任意一个 Promise 对象成功完成或失败时，Promise.race 返回的 Promise 对象就会立即成功完成或失败。
示例代码
// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1');
}, 3000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise2');
}, 2000);
});
Promise.race([promise1, promise2])
.then((value) => {
console.log(value); // 'promise2'
})
.catch((error) => {
console.error(error);
});在上面的示例代码中，我们创建了两个 Promise 对象。promise1 需要等待 3 秒钟后才会成功完成，promise2 需要等待 2 秒钟后才会成功完成。接着，我们使用 Promise.race 方法将这两个 Promise 对象放入一个数组中，并调用 then 方法来处理 Promise.race 返回的 Promise 对象。由于 promise2 先完成，Promise.race 返回的 Promise 对象就会立即成功完成，此时它的值为 promise2 的返回值。
注意事项
- Promise.race 方法接收的参数必须是一个数组，否则会抛出 TypeError 错误。
- 如果数组中有一个 Promise 对象成功完成或失败，Promise.race 返回的 Promise 对象就会立即成功完成或失败。
- 如果数组中的 Promise 对象有一个永远处于 pending 状态，Promise.race 将永远不会返回。
结语
Promise.all 和 Promise.race 是 Promise 中非常重要的两个方法，它们能够帮助我们更好地管理异步任务，提高代码的性能和可维护性。在使用 Promise.all 和 Promise.race 时，我们需要注意它们的使用场景和注意事项，以确保代码能够正确地处理异步任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d165f6a941bf71342fa14a