ES6 中的 Promise.race 和 Promise.all 方法的使用方式-JavaScript中文网-JavaScript教程资源分享门户

ES6 中的 Promise.race 和 Promise.all 方法的使用方式

JavaScript 中的 Promise 对象是一种非常强大的异步编程方式，它可以大大简化代码的复杂度，提高代码的可读性和可维护性。而在所有的 Promise 方法中，Promise.race 和 Promise.all 是两个非常常用的方法。它们的使用方法和特点在本文中将得到详细的介绍和说明。

Promise.race

Promise.race 方法接收一个由多个 Promise 对象组成的数组作为参数，即：

Promise.race(iterable)

这些 Promise 对象中只要有一个对象先完成或者出现异常，就会立即返回该 Promise 对象的结果或者错误信息。而其他的 Promise 对象则会被忽略。

在实际开发中，使用 Promise.race 很常见，比如我们想让我们前端代码具备超时控制能力。假设我们需要从服务器获取一些数据，但是如果数据的请求时间过长（比如 1 分钟），前端页面会变得非常不流畅，这时候我们就可以使用 Promise.race 来设置超时时间：

function fetchWithTimeout(url, timeout) {
  return Promise.race([fetch(url), new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('timeout')), timeout);
  })]);
}

以上代码中，fetchWithTimeout 方法接收两个参数，第一个参数表示请求数据的 URL，第二个参数是超时时间，单位是毫秒。Promise.race 方法接收一个数组，其中第一个元素是 fetch(url) 方法，表示获取数据的 Promise，第二个元素是一个新的 Promise 对象，该 Promise 对象在 timeout 毫秒后被拒绝，并抛出一个超时错误。

使用 Promise.race 可以让我们的前端代码具备灵活、强大的超时控制能力，而不再需要依靠后台服务器控制请求的时间。

Promise.all

Promise.all 方法则有些不同，它要求所有的 Promise 对象都要完成，并排除异常情况，才会返回结果，即：

Promise.all(iterable)

如果 Promise.all 参数中的所有 Promise 对象都已经完成，则 Promise.all 返回一个由每个 Promise 对象结果组成的数组。如果其中任何一个 Promise 对象被拒绝或者出现异常，则 Promise.all 返回的 Promise 对象会被拒绝。

在实际开发中，Promise.all 方法也非常常用，比如我们需要同时请求多组数据，如果使用传统的回调函数和异步编程方式，会使代码变得非常复杂难以维护，而使用 Promise.all 可以使代码的逻辑更加清晰简洁。

举个例子，假设我们要从服务器请求多个数据源，并且需要等待每个数据源的请求完成，然后再进行下一步操作，这时候我们可以使用 Promise.all 方法：

Promise.all([getDataFromUrl(url1), getDataFromUrl(url2), getDataFromUrl(url3)])
  .then(([data1, data2, data3]) => {
    // do something with data1, data2, data3
  });

以上代码中，Promise.all 方法接收一个 Promise 数组，其中每个 Promise 对象都是通过 getDataFromUrl 方法获取的数据源的 Promise 对象。在 Promise.all.then() 中，我们用解构赋值从 Promise.all 返回的数据数组中获取到每个 Promise 对象的结果，然后进行下一步的数据操作。

总结

ES6 中的 Promise.race 和 Promise.all 方法都是非常实用和常用的异步编程方式，使用它们可以使前端代码逻辑更加清晰简洁，并且提高代码的可读性和可维护性。需要注意在使用的过程中要注意使用场景和各种异常情况。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a6c462add4f0e0fff8d0c5

ES6 中的 Promise.race 和 Promise.all 方法的使用方式

纠错反馈