一篇文章带你理解Promise.race()

站长

2023年03月15日 19:56 · 阅读数 17

当我们需要同时发起多个异步请求并在其中任意一个请求完成后得到响应时，可以使用 Promise.race() 方法。本文将对 Promise.race() 方法进行深入理解和实践。

什么是 Promise.race() 方法

Promise.race() 方法接收一个包含多个 Promise 对象的可迭代对象，并返回一个新的 Promise 对象，该 Promise 对象在多个 Promise 中任意一个 Promise 对象状态变为 fulfilled 或 rejected 时立即返回该 Promise 对象的值或原因。

下面是一个简单的例子：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 2000);
});

Promise.race([promise1, promise2]).then(result => {
  console.log(result); // "Promise 1 resolved"
});

在上述例子中，我们创建了两个 Promise 对象并使用 Promise.race() 方法来获取其中任何一个 Promise 对象的解决结果。在本例中，由于 promise1 对象的解决时间比 promise2 对象的解决时间早，因此 Promise.race() 方法的结果为 Promise 1 resolved。

Promise.race() 方法的应用场景

Promise.race() 方法适用于多个异步请求之间的竞争场景。如果我们需要同时向多个 API 发送请求，但是只有一个请求的响应时间是关键的，那么我们可以使用 Promise.race() 方法来优化请求时间，提高效率。

下面是一个例子，假设我们需要从两个 API 中获取数据，并返回响应时间较短的数据：

const fetchFromAPI1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data from API 1');
  }, 1000);
});

const fetchFromAPI2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data from API 2');
  }, 500);

Promise.race([fetchFromAPI1, fetchFromAPI2]).then(result => {
  console.log(result); // "Data from API 2"
});

在上述例子中，由于 fetchFromAPI2 的解决时间比 fetchFromAPI1 的解决时间早，因此 Promise.race() 方法的结果为 Data from API 2。

Promise.race() 方法的错误处理

在使用 Promise.race() 方法时，如果任何一个 Promise 对象的状态变为 rejected，那么 Promise.race() 方法会立即返回该 Promise 对象的原因。因此，我们需要注意错误处理。

下面是一个例子，在该例子中，我们使用 Promise.race() 方法来获取两个 Promise 对象的解决结果，并使用 .catch() 方法来捕获错误：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 2 rejected');
  }, 1000);
});

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // "Promise 1 resolved"
  })
  .catch((error) => {
    console.error(error); // "Promise 2 rejected"
  });

在上述例子中，由于 promise2 的状态变为 rejected，因此 Promise.race() 方法的结果为 Promise 2 rejected，并且该结果被 .catch() 方法捕获。 Promise.race() 方法的使用技巧以下是一些使用 Promise.race() 方法的技巧：

Promise.race() 添加超时功能

我们可以使用 Promise.race() 方法来添加超时功能。例如，如果我们向某个 API 发送请求，但是该 API 的响应时间过长，我们可以使用 Promise.race() 方法来设置请求的超时时间。下面是一个例子，我们使用 Promise.race() 方法来发送请求并在 3 秒内获取响应。如果请求未能在 3 秒内完成，我们将返回超时错误：

const timeout = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Request timed out');
  }, 3000);
});
const fetchFromAPI = new Promise((resolve, reject) => {
  // 发送 API 请求
});
Promise.race([fetchFromAPI, timeout])
  .then((result) => {
    console.log(result); // 请求成功
  })
  .catch((error) => {
    console.error(error); // 请求超时
  });

在上述例子中，我们设置了一个 3 秒的超时时间，并将其作为一个 Promise 对象传递给 Promise.race() 方法。如果请求能够在 3 秒内完成，则返回响应结果；否则返回超时错误。

Promise.race() 取消异步操作

在某些情况下，我们可能需要取消某个异步操作。例如，如果我们正在下载一个大文件，但用户决定取消下载操作，我们可以使用 Promise.race() 方法来取消下载操作。

下面是一个例子，我们使用 Promise.race() 方法来下载一个大文件，并将其作为一个 Promise 对象返回。如果用户点击取消按钮，则会调用 cancelDownload() 方法并取消下载操作：

let downloadCancelled = false;

const cancelDownload = () => {
  downloadCancelled = true;
};

const downloadFile = new Promise((resolve, reject) => {
  // 下载大文件
});

const cancel = new Promise((resolve, reject) => {
  while (!downloadCancelled) {
    // 等待用户点击取消按钮
  }
  resolve('Download cancelled');
});

Promise.race([downloadFile, cancel]).then(result => {
  console.log(result); // 下载已取消
}).catch(error => {
  console.error(error); // 下载错误
});

在上述例子中，我们创建了一个 cancelDownload() 方法来取消下载操作，并将其作为一个 Promise 对象传递给 Promise.race() 方法。如果用户点击取消按钮，则 downloadCancelled 变量的值将变为 true，Promise.race() 方法将返回 Download cancelled。

结论

本文对 Promise.race() 方法进行了深入理解和实践，该方法能够同时处理多个 Promise 对象，并返回最先解决的 Promise 对象的结果。如果最先解决的 Promise 对象变为 rejected，Promise.race() 方法将返回该 Promise 对象的错误信息。

我们可以使用 Promise.race() 方法来添加超时功能、取消异步操作等，从而更好地控制异步操作的行为。

在使用 Promise.race() 方法时，需要注意以下几点：

如果传递给 Promise.race() 方法的 Promise 对象数组中没有任何 Promise 对象，或者数组中的所有 Promise 对象都变为 rejected，Promise.race() 方法将返回一个 pending 状态的 Promise 对象，并永远不会解决。
由于 Promise.race() 方法只返回最先解决的 Promise 对象的结果，因此在使用该方法时需要小心处理 Promise 对象的状态，以免出现预期之外的行为。

通过深入理解和实践 Promise.race() 方法，我们可以更好地掌握 JavaScript 异步编程的技巧，并编写出更高效、更健壮的代码。