promises中的race method是什么意思

promises中的race method是什么意思

在 JavaScript 中，Promise.race() 是一个静态方法，用于将多个 Promise 包装成一个新的 Promise。这个新 Promise 的结果取决于 最先完成（无论是 fulfilled 还是 rejected）的 Promise。

1. 语法

Promise.race(iterable);

• 参数：一个可迭代对象（如数组），包含多个 Promise 或其他值。
• 返回值：一个新的 Promise，其状态和值与第一个完成的 Promise 相同。

2. 使用场景

• 超时控制：为异步操作设置超时限制。
• 竞速任务：从多个异步任务中选择最快的结果。

3. 示例

示例 1：基本用法

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, "第一个完成"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "第二个完成"));

Promise.race([promise1, promise2])
    .then((result) => console.log(result)) // 输出: 第二个完成
    .catch((error) => console.error(error));

示例 2：超时控制

function fetchWithTimeout(url, timeout) {
    const fetchPromise = fetch(url);
    const timeoutPromise = new Promise((_, reject) => 
        setTimeout(() => reject(new Error("请求超时")), timeout)
    );

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

fetchWithTimeout("https://api.example.com/data", 3000)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error.message)); // 输出: 请求超时

示例 3：处理错误

const promise1 = new Promise((_, reject) => setTimeout(reject, 100, "第一个失败"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, "第二个完成"));

Promise.race([promise1, promise2])
    .then((result) => console.log(result))
    .catch((error) => console.error(error)); // 输出: 第一个失败

4. 注意事项

• 非 Promise 值：如果可迭代对象中包含非 Promise 值（如数字、字符串），Promise.race() 会将其视为已完成的 Promise。

  Promise.race([1, 2, 3])
      .then((result) => console.log(result)); // 输出: 1
  

• 空数组：如果传入空数组，返回的 Promise 将永远处于 pending 状态。

  Promise.race([])
      .then((result) => console.log(result)) // 不会执行
      .catch((error) => console.error(error)); // 不会执行
  

5. 与 Promise.all() 的区别

方法	行为描述	示例
Promise.race()	返回第一个完成的 Promise（无论成功或失败）	Promise.race([p1, p2])
Promise.all()	等待所有 Promise 完成，返回结果数组	Promise.all([p1, p2])

总结

• Promise.race()：用于竞速任务或超时控制，返回第一个完成的 Promise。
• 适用场景：
  • 超时处理。
  • 从多个异步任务中选择最快的结果。
• 注意事项：
  • 非 Promise 值会被自动包装为已完成的 Promise。
  • 空数组会导致返回的 Promise 永远处于 pending 状态。

通过合理使用 Promise.race()，可以优化异步操作的处理逻辑。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github