在前端开发中，异步编程是必不可少的一部分。而 Promise 是一种解决异步编程的方案，它可以让异步操作更加简单、清晰，并且避免了回调地狱的问题。在 ES10 中，Promise 类新增了两个方法：Promise.all() 和 Promise.race()。这两个方法都可以用来处理多个 Promise 对象的并发操作，但是它们的实现方式和使用场景却有所不同。
Promise.all() 方法
Promise.all() 方法接收一个 Promise 对象的数组作为参数，返回一个新的 Promise 对象。当数组中所有的 Promise 对象都成功执行后，新的 Promise 对象才会被 resolved。如果数组中任意一个 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.resolve() 方法创建了三个 Promise 对象，然后将它们作为参数传递给 Promise.all() 方法。当所有的 Promise 对象都成功执行后，Promise.all() 方法返回一个新的 Promise 对象，它的 resolved 值为一个数组，包含了所有 Promise 对象的 resolved 值。
Promise.race() 方法
Promise.race() 方法接收一个 Promise 对象的数组作为参数，返回一个新的 Promise 对象。当数组中任意一个 Promise 对象成功执行或被 rejected 后，新的 Promise 对象就会被 resolved 或 rejected。
下面是 Promise.race() 方法的示例代码：
-- -------------------- ---- -------
----- -------- - --- --------------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- --------------- -- -
------------- -- -
--------------------
-- -----
---
----------------------- ----------
----------- -- -
------------------- -- ----------
---在上面的代码中，我们创建了两个 Promise 对象，它们分别在 1 秒和 0.5 秒后 resolved。然后将它们作为参数传递给 Promise.race() 方法。由于 promise2 先 resolved，所以新的 Promise 对象也会被 resolved，并且它的 resolved 值为 promise2 的 resolved 值。
对比
Promise.all() 和 Promise.race() 方法都可以用来处理多个 Promise 对象的并发操作，但是它们的实现方式和使用场景有所不同。
Promise.all() 方法会等待所有的 Promise 对象都执行完成后再执行下一步操作，因此适用于需要等待多个异步操作全部完成后再进行下一步操作的场景。例如，同时请求多个接口并且需要将它们的数据合并后再进行渲染。
Promise.race() 方法会在任意一个 Promise 对象执行完成后立即执行下一步操作，因此适用于需要快速响应的场景。例如，同时请求多个接口，并且只需要使用最快响应的接口的数据进行渲染。
总结
在异步编程中，Promise 是一种非常有用的解决方案。在 ES10 中，Promise 类新增了两个方法：Promise.all() 和 Promise.race()。这两个方法都可以用来处理多个 Promise 对象的并发操作，但是它们的实现方式和使用场景有所不同。Promise.all() 方法适用于需要等待多个异步操作全部完成后再进行下一步操作的场景，而 Promise.race() 方法适用于需要快速响应的场景。在实际开发中，我们应该根据具体的需求选择合适的方法来处理多个 Promise 对象的并发操作。
以上是 Promise.all() 和 Promise.race() 方法的详细介绍和对比，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662c70ffd3423812e49f55a1