在前端开发中，异步编程是一项重要的技能。为了解决回调地狱的问题，ES6 引入了 Promise 对象，它是一种更加优雅的处理异步操作的方式。Promise.all() 和 Promise.race() 是 Promise 对象中的两个重要方法，本文将着重介绍它们的区别以及使用方法。
Promise.all()
Promise.all() 方法接收一个 Promise 对象数组作为参数，返回一个 Promise 实例。这个 Promise 实例会在所有的 Promise 对象都成功解决后才会被解决，返回值是一个数组，包含了所有 Promise 对象的解决结果。如果其中有任何一个 Promise 对象被拒绝，那么 Promise.all() 方法返回的 Promise 对象就会被拒绝，返回值是第一个被拒绝的 Promise 对象的拒绝原因。
例如，我们有以下三个 Promise 对象：
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3);
我们可以使用 Promise.all() 方法来等待它们都解决后再执行下一步操作：
Promise.all([promise1, promise2, promise3])
.then(([result1, result2, result3]) => {
console.log(result1, result2, result3); // 1, 2, 3
})
.catch((error) => {
console.error(error);
});如果其中有任何一个 Promise 对象被拒绝，那么 Promise.all() 方法返回的 Promise 对象就会被拒绝：
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - ------------------ --------------- ------------
----- -------- - -------------------
---------------------- --------- ----------
---------------- -------- --------- -- -
-------------------- -------- ---------
--
-------------- -- -
--------------------- -- ------ -------- --------
---Promise.race()
Promise.race() 方法同样接收一个 Promise 对象数组作为参数，返回一个 Promise 实例。这个 Promise 实例会在第一个 Promise 对象解决或拒绝后就立即被解决或拒绝，返回值是第一个解决或拒绝的 Promise 对象的解决结果或拒绝原因。
例如，我们有以下两个 Promise 对象：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------- -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------- --------------- ------------
-- -----
---我们可以使用 Promise.race() 方法来等待它们中的任何一个解决或拒绝后再执行下一步操作：
Promise.race([promise1, promise2])
.then((result) => {
console.log(result); // promise2 resolved
})
.catch((error) => {
console.error(error); // Error: promise2 rejected
});由于 promise2 的超时时间比 promise1 短，因此 promise2 先被解决或拒绝，Promise.race() 方法返回的 Promise 对象就会被解决或拒绝。
总结
Promise.all() 和 Promise.race() 都是 Promise 对象的重要方法，它们可以帮助我们更加优雅地处理异步操作。Promise.all() 等待所有的 Promise 对象都解决后才会被解决，Promise.race() 则等待其中任何一个 Promise 对象解决或拒绝后就立即被解决或拒绝。在实际开发中，我们可以根据具体的需求选择合适的方法来处理异步操作。
参考代码
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - -------------------
---------------------- --------- ----------
---------------- -------- --------- -- -
-------------------- -------- --------- -- -- -- -
--
-------------- -- -
---------------------
---
----- -------- - -------------------
----- -------- - ------------------ --------------- ------------
----- -------- - -------------------
---------------------- --------- ----------
---------------- -------- --------- -- -
-------------------- -------- ---------
--
-------------- -- -
--------------------- -- ------ -------- --------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------- -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------- --------------- ------------
-- -----
---
----------------------- ----------
-------------- -- -
-------------------- -- -------- --------
--
-------------- -- -
--------------------- -- ------ -------- --------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bd3176add4f0e0ff6df116