前言
在现代 Web 开发中，JavaScript 已经成为了不可或缺的一部分。随着 ES6、ES7、ES8 等版本的发布，JavaScript 也不断地在发展和进化。其中，Promise 是 ES6 中引入的一种新的异步处理方式，它可以让我们更加便捷地处理异步操作。而 Promise.all() 和 Promise.race() 则是 Promise 中比较常用的两个方法，本文将对它们进行详细的解析和讲解。
Promise.all()
Promise.all() 方法接收一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当传入的 Promise 对象数组中所有的 Promise 都变为 resolved 状态时，新的 Promise 对象才会变为 resolved 状态。如果传入的 Promise 对象数组中有任意一个 Promise 变为 rejected 状态，那么新的 Promise 对象就会变为 rejected 状态。
下面是一个使用 Promise.all() 方法的示例代码：
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3]).then(values => {
console.log(values); // [1, 2, 3]
});在上面的代码中，我们创建了三个 Promise 对象，并将它们作为参数传入 Promise.all() 方法中。当三个 Promise 对象都变为 resolved 状态时，Promise.all() 返回的新的 Promise 对象也会变为 resolved 状态，并且它的值是一个包含了三个 Promise 对象的值的数组。
如果我们将其中一个 Promise 对象变为 rejected 状态，那么 Promise.all() 返回的新的 Promise 对象也会变为 rejected 状态。例如：
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Promise Error'));
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3]).catch(error => {
console.log(error); // Error: Promise Error
});在上面的代码中，我们将 promise2 变为了 rejected 状态，所以 Promise.all() 返回的新的 Promise 对象也会变为 rejected 状态，并且它的值是 promise2 的错误信息。
Promise.race()
Promise.race() 方法同样接收一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当传入的 Promise 对象数组中有任意一个 Promise 变为 resolved 或 rejected 状态时，新的 Promise 对象就会变为对应的状态。Promise.race() 方法只会返回第一个变为 resolved 或 rejected 状态的 Promise 对象的值或错误信息。
下面是一个使用 Promise.race() 方法的示例代码：
const promise1 = new Promise(resolve => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise(resolve => setTimeout(resolve, 100, 'two'));
Promise.race([promise1, promise2]).then(value => {
console.log(value); // 'two'
});在上面的代码中，我们创建了两个 Promise 对象，并将它们作为参数传入 Promise.race() 方法中。由于 promise2 的延迟时间比 promise1 短，所以它会先变为 resolved 状态，Promise.race() 返回的新的 Promise 对象也会变为 resolved 状态，并且它的值是 promise2 的值。
同样地，如果我们将其中一个 Promise 对象变为 rejected 状态，那么 Promise.race() 返回的新的 Promise 对象也会变为 rejected 状态。例如：
const promise1 = new Promise(resolve => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, new Error('Promise Error')));
Promise.race([promise1, promise2]).catch(error => {
console.log(error); // Error: Promise Error
});在上面的代码中，我们将 promise2 变为了 rejected 状态，所以 Promise.race() 返回的新的 Promise 对象也会变为 rejected 状态，并且它的值是 promise2 的错误信息。
总结
Promise.all() 和 Promise.race() 方法是 Promise 中比较常用的两个方法，它们都可以帮助我们更加便捷地处理异步操作。在使用时，我们需要注意传入的 Promise 对象数组中的每个 Promise 对象的状态变化，以便正确地处理它们的结果。
希望本文对你有所帮助，如果你有任何疑问或建议，欢迎在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cca806add4f0e0ff61bdc6