当前位置：首页 > article >正文

Promise.race

article 2025/1/30 4:52:25

Promise.race 是 JavaScript 中 Promise 对象的一个静态方法，用于将多个 Promise 实例包装成一个新的 Promise 实例。这个新的 Promise 实例会在 最先完成（无论是 fulfilled 还是 rejected） 的 Promise 完成时完成，并返回该 Promise 的结果或错误。

1. 语法

Promise.race(iterable);

参数：iterable 是一个可迭代对象（如数组），包含多个 Promise 实例。
返回值：返回一个新的 Promise 实例，其状态和结果由最先完成的 Promise 决定。

2. 使用场景

Promise.race 通常用于以下场景：

超时控制：设置一个超时 Promise，如果某个操作在指定时间内未完成，则触发超时。
竞速任务：从多个异步任务中选择最先完成的任务。
资源竞争：在多个资源中选择最先可用的资源。

3. 示例

(1) 基本用法

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 输出: 'two'（因为 promise2 先完成）
  })
  .catch((error) => {
    console.error(error);
  });

(2) 超时控制

function fetchWithTimeout(url, timeout) {
  const fetchPromise = fetch(url);
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Request timed out')), timeout)
  );

  return Promise.race([fetchPromise, timeoutPromise]);
}

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

(3) 竞速任务

const task1 = new Promise((resolve) => setTimeout(resolve, 300, 'Task 1'));
const task2 = new Promise((resolve) => setTimeout(resolve, 100, 'Task 2'));
const task3 = new Promise((resolve) => setTimeout(resolve, 200, 'Task 3'));

Promise.race([task1, task2, task3])
  .then((result) => {
    console.log(result); // 输出: 'Task 2'（因为 task2 最先完成）
  })
  .catch((error) => {
    console.error(error);
  });

4. 注意事项

非 Promise 值：

如果 iterable 中包含非 Promise 值（如数字、字符串等），Promise.race 会将其视为已完成的 Promise。

Promise.race([1, 2, 3]).then((result) => {
  console.log(result); // 输出: 1（第一个非 Promise 值）
});

空数组：

如果 iterable 是一个空数组，返回的 Promise 将永远处于 pending 状态。

Promise.race([]).then((result) => {
  console.log(result); // 永远不会执行
});

错误处理：

如果最先完成的 Promise 是 rejected 状态，Promise.race 返回的 Promise 也会是 rejected 状态。

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((_, reject) => setTimeout(reject, 100, 'error'));

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 不会执行
  })
  .catch((error) => {
    console.error(error); // 输出: 'error'
  });