Promise.race() 对 Promise 的理解及应用实例介绍-JavaScript中文网-JavaScript教程资源分享门户

前言

在 JavaScript 中，Promise 是一种用于处理异步操作的方法。它可以让我们更好地处理异步操作的结果，而不必使用回调函数。Promise.race() 是 Promise 中的一个方法，它可以帮助我们在多个 Promise 对象中找到最快完成的一个，并返回它的结果。

Promise.race() 的基本用法

Promise.race() 接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象将在数组中的任何一个 Promise 对象完成时被解决。它的语法如下：

Promise.race(iterable);

其中，iterable 是一个可迭代对象，通常是一个数组，其中包含 Promise 对象。

下面是 Promise.race() 的一个简单示例：

// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

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

Promise.race([promise1, promise2])
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中，我们创建了两个 Promise 对象。第一个 Promise 对象将在 1 秒钟后被解决，而第二个 Promise 对象将在 500 毫秒后被解决。我们使用 Promise.race() 方法将这两个 Promise 对象放在一个数组中，并在其中任何一个 Promise 对象完成时解决新的 Promise 对象。在这个例子中，由于第二个 Promise 对象完成得更快，因此它的结果将被打印出来。

Promise.race() 的应用实例

超时处理

在实际开发中，我们经常需要处理一些需要在一定时间内完成的操作。如果这些操作超时了，我们可能需要执行一些备选方案。这时，Promise.race() 就可以派上用场了。下面是一个简单的示例：

// javascriptcn.com 代码示例
function fetchWithTimeout(url, timeout) {
  return Promise.race([
    fetch(url),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error('Timeout'));
      }, timeout);
    })
  ]);
}

fetchWithTimeout('https://example.com', 5000)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中，我们定义了一个 fetchWithTimeout() 函数，它接收两个参数：url 和 timeout。我们使用 Promise.race() 方法将 fetch() 方法和一个新的 Promise 对象放在一起，这个新的 Promise 对象将在 timeout 毫秒后被拒绝。如果 fetch() 方法在 timeout 毫秒内完成了，那么新的 Promise 对象将被忽略。如果 fetch() 方法在 timeout 毫秒内没有完成，那么新的 Promise 对象将被拒绝，并返回一个超时错误。

并发请求

在一些场景下，我们需要同时发起多个请求，并在所有请求完成后处理它们的结果。这时，Promise.race() 也可以帮助我们实现这个功能。下面是一个示例：

// javascriptcn.com 代码示例
const urls = ['https://example.com/api/1', 'https://example.com/api/2', 'https://example.com/api/3'];

Promise.all(urls.map(url => fetch(url)))
  .then(responses => {
    console.log(responses);
  });

Promise.race(urls.map(url => fetch(url)))
  .then(response => {
    console.log(response);
  });

在这个示例中，我们定义了一个包含多个 URL 的数组。我们使用 Promise.all() 方法将这些 URL 转换为 Promise 对象，并在所有 Promise 对象都完成后将它们的结果打印出来。我们还使用了 Promise.race() 方法来处理这些 URL，它将返回最快完成的请求的结果。

总结

Promise.race() 是一个非常有用的方法，它可以帮助我们在多个 Promise 对象中找到最快完成的一个，并返回它的结果。在实际开发中，我们可以使用它来处理超时、并发请求等场景。希望这篇文章能够帮助你更好地理解 Promise.race() 方法的用法和应用。

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