在前端开发中，异步编程是非常常见的。而 Promise 是一种非常流行的异步编程方式，它可以让我们更加优雅地处理异步操作。而 Promise.all() 和 Promise.race() 是 Promise 中的两个非常重要的方法，本文将介绍它们的区别和用法。
Promise.all()
Promise.all() 方法接收一个数组参数，里面的每个元素都是一个 Promise 对象。它返回一个新的 Promise 对象，当数组中所有的 Promise 对象都成功时，新的 Promise 对象才会成功，返回值是一个包含所有 Promise 对象返回值的数组；当数组中任意一个 Promise 对象失败时，新的 Promise 对象就会失败，失败的原因是第一个失败的 Promise 对象的错误信息。
Promise.all() 的语法如下：
Promise.all(iterable);
其中，iterable 是一个可迭代对象，比如数组。
下面是一个使用 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 对象，分别返回 1、2、3。我们把它们放在一个数组中传给 Promise.all() 方法，当这三个 Promise 对象都成功时，Promise.all() 返回一个新的 Promise 对象，它的返回值是一个包含 1、2、3 的数组。
Promise.race()
Promise.race() 方法接收一个数组参数，里面的每个元素都是一个 Promise 对象。它返回一个新的 Promise 对象，当数组中任意一个 Promise 对象成功或失败时，新的 Promise 对象就会成功或失败，返回值或错误信息是第一个成功或失败的 Promise 对象的返回值或错误信息。
Promise.race() 的语法如下：
Promise.race(iterable);
其中，iterable 是一个可迭代对象，比如数组。
下面是一个使用 Promise.race() 方法的示例代码：
const promise1 = new Promise(resolve => setTimeout(resolve, 5000, 'foo'));
const promise2 = new Promise(resolve => setTimeout(resolve, 1000, 'bar'));
Promise.race([promise1, promise2]).then(value => {
console.log(value); // "bar"
});在这个例子中，我们定义了两个 Promise 对象，分别在 5 秒后和 1 秒后返回一个值。我们把它们放在一个数组中传给 Promise.race() 方法，当这两个 Promise 对象中有一个成功时，Promise.race() 返回一个新的 Promise 对象，它的返回值是第一个成功的 Promise 对象的返回值，即 "bar"。
区别和用法
Promise.all() 和 Promise.race() 的区别很明显：Promise.all() 等待所有 Promise 对象都成功并返回结果后才会返回一个新的 Promise 对象，而 Promise.race() 只要有一个 Promise 对象成功或失败就会返回一个新的 Promise 对象。
在实际开发中，我们可以根据不同的需求选择使用 Promise.all() 或 Promise.race()。比如，当我们需要同时请求多个接口并等待它们都返回结果后再做一些处理时，可以使用 Promise.all()；当我们需要查找一个接口响应最快的结果时，可以使用 Promise.race()。
下面是一个使用 Promise.all() 方法的示例代码：
// javascriptcn.com 代码示例
const urls = ['https://api.github.com/users/defunkt', 'https://api.github.com/users/pjhyett', 'https://api.github.com/users/wycats'];
const requests = urls.map(url => fetch(url));
Promise.all(requests)
.then(responses => {
for (const response of responses) {
console.log(`${response.url}: ${response.status}`);
}
return responses;
})
.then(responses => Promise.all(responses.map(response => response.json())))
.then(users => {
console.log(users);
})
.catch(error => {
console.log(error);
});在这个例子中，我们定义了一个包含三个接口地址的数组 urls，然后使用 map() 方法将它们转换成 Promise 对象，并放在一个数组 requests 中。我们使用 Promise.all() 方法等待所有 Promise 对象都成功并返回结果后，再打印每个接口的响应状态码，并将所有响应的 JSON 数据都解析成对象，并打印出来。
下面是一个使用 Promise.race() 方法的示例代码：
// javascriptcn.com 代码示例
const urls = ['https://api.github.com/users/defunkt', 'https://api.github.com/users/pjhyett', 'https://api.github.com/users/wycats'];
const requests = urls.map(url => fetch(url));
Promise.race(requests)
.then(response => {
console.log(`${response.url}: ${response.status}`);
return response;
})
.then(response => response.json())
.then(user => {
console.log(user);
})
.catch(error => {
console.log(error);
});在这个例子中，我们定义了一个包含三个接口地址的数组 urls，然后使用 map() 方法将它们转换成 Promise 对象，并放在一个数组 requests 中。我们使用 Promise.race() 方法等待所有 Promise 对象中最快响应的一个，并打印它的响应状态码，并将响应的 JSON 数据解析成对象，并打印出来。
总结
Promise.all() 和 Promise.race() 是 Promise 中的两个非常重要的方法。它们都可以让我们更加优雅地处理异步操作。使用它们可以有效地提高代码的可读性和可维护性。在实际开发中，我们根据不同的需求选择使用不同的方法，以达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c260595b1f8cacd637be5