Promise.race

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

1. 语法

Promise.race(iterable);

• 参数：iterable 是一个可迭代对象（如数组），包含多个 Promise 实例。

• 返回值：返回一个新的 Promise 实例，其状态和结果由最先完成的 Promise 决定。

2. 使用场景

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

1. 超时控制：设置一个超时 Promise，如果某个操作在指定时间内未完成，则触发超时。

2. 竞速任务：从多个异步任务中选择最先完成的任务。

3. 资源竞争：在多个资源中选择最先可用的资源。

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'});

5. 总结

• Promise.race 用于从多个 Promise 中选择最先完成的一个。

• 适用场景：超时控制、竞速任务、资源竞争等。

• 注意事项：

  • 支持非 Promise 值。

  • 空数组会导致返回的 Promise 永远处于 pending 状态。

  • 错误处理需要特别注意。

通过合理使用 Promise.race，可以更好地控制异步任务的执行顺序和超时处理。