前言
在前端开发中，异步编程是不可避免的。而 Promise 是现代 JavaScript 中最常用的异步编程方式之一。Promise.race() 和 Promise.all() 都是 Promise 的方法，它们在处理异步任务时非常有用。本文将介绍它们的区别和应用场景。
Promise.race() 和 Promise.all() 的区别
Promise.race()
Promise.race() 方法接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象将在数组中的任何一个 Promise 对象解决或拒绝后解决或拒绝。如果传入的 Promise 数组为空，则返回的 Promise 对象将永远等待。
示例代码：
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value); // 'two'
});在上面的示例中，Promise.race() 方法接收了两个 Promise 对象 promise1 和 promise2，它们会在 500 毫秒和 100 毫秒后分别解决。由于 promise2 的解决时间更短，所以最终返回的是 promise2 的解决值 'two'。
Promise.all()
Promise.all() 方法也接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象将在数组中的所有 Promise 对象都解决后解决。如果传入的 Promise 数组为空，则返回的 Promise 对象将立即解决。
示例代码：
// javascriptcn.com 代码示例
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // [3, 42, 'foo']
});在上面的示例中，Promise.all() 方法接收了三个 Promise 对象 promise1、promise2 和 promise3。其中，promise1 是一个已解决的 Promise 对象，promise2 是一个普通值，promise3 是一个在 100 毫秒后解决的 Promise 对象。由于所有的 Promise 对象都解决了，所以最终返回的是一个包含所有解决值的数组 [3, 42, 'foo']。
Promise.race() 和 Promise.all() 的应用场景
Promise.race()
Promise.race() 方法适用于在多个异步任务中只需要获取最快的结果的场景。例如，在前端开发中，当需要从多个服务器中获取数据时，可以使用 Promise.race() 方法获取最快的响应结果。
示例代码：
// javascriptcn.com 代码示例
const fetchFromServer1 = fetch('https://server1.com/data');
const fetchFromServer2 = fetch('https://server2.com/data');
const fetchFromServer3 = fetch('https://server3.com/data');
Promise.race([fetchFromServer1, fetchFromServer2, fetchFromServer3]).then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
});在上面的示例中，Promise.race() 方法接收了三个 fetch() 方法返回的 Promise 对象。由于 Promise.race() 方法会返回最快的 Promise 对象的结果，所以最终只会输出最快的响应结果。
Promise.all()
Promise.all() 方法适用于在多个异步任务中需要等待所有结果的场景。例如，在前端开发中，当需要从多个服务器中获取数据，并且需要等待所有数据获取完成后再进行下一步操作时，可以使用 Promise.all() 方法等待所有数据获取完成。
示例代码：
// javascriptcn.com 代码示例
const fetchFromServer1 = fetch('https://server1.com/data');
const fetchFromServer2 = fetch('https://server2.com/data');
const fetchFromServer3 = fetch('https://server3.com/data');
Promise.all([fetchFromServer1, fetchFromServer2, fetchFromServer3]).then((responses) => {
const data1 = responses[0].json();
const data2 = responses[1].json();
const data3 = responses[2].json();
return Promise.all([data1, data2, data3]);
}).then((data) => {
console.log(data);
}).catch((error) => {
console.error(error);
});在上面的示例中，Promise.all() 方法接收了三个 fetch() 方法返回的 Promise 对象。由于 Promise.all() 方法会等待所有的 Promise 对象都解决后才返回结果，所以最终输出的是所有数据获取结果的数组。
总结
Promise.race() 和 Promise.all() 都是非常有用的 Promise 方法。它们的不同之处在于：Promise.race() 返回最快的 Promise 对象的结果；而 Promise.all() 返回所有 Promise 对象的结果。在实际开发中，根据不同的场景选择不同的方法，可以提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b98837d4982a6eb5eb4b4