JavaScript Promise.race竞速异步任务详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript Promise.race竞速异步任务详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

Promise.race 在 JavaScript 中的作用是返回第一个确定状态的 Promise 结果，无论成功或失败。1. 它适用于“只要最快结果”的场景，如实现超时机制或选择多个异步任务中最早完成的结果；2. 与 Promise.any 不同，race 对失败零容忍，只要有一个 Promise 状态确定即返回，而 any 会等待第一个成功结果或所有失败后返回 AggregateError；3. 使用时需注意 race 不会取消输掉的 Promise，可能导致资源浪费或副作用，需手动管理取消逻辑；4. 错误处理方面，race 一旦遇到首个 reject 即终止，可能不符合期望，需根据需求选择合适的方法。

Promise.race 在 JavaScript 异步编程里，说白了，就是一场“比谁跑得快”的竞赛。它接收一个 Promise 数组（或者任何可迭代的 Promise 对象），然后返回一个新的 Promise。这个新的 Promise 会在数组中第一个 Promise 状态确定（无论是成功还是失败）时，立刻采用那个 Promise 的结果。它不关心其他 Promise 最终是成功还是失败，只要有一个“冲线”了，比赛就结束了。

我们来具体看看它怎么用。想象一下，你有好几个异步任务，比如从不同的服务器拉取数据，或者执行几个可能耗时不同的操作，你只想要最快完成的那个结果。这时候 Promise.race 就派上用场了。

// 假设我们有几个模拟异步操作
function fetchDataFromSourceA() {
    return new Promise(resolve => {
        const delay = Math.random() * 500 + 500; // 500ms - 1000ms
        setTimeout(() => {
            console.log('数据源A完成');
            resolve('数据来自源A');
        }, delay);
    });
}

function fetchDataFromSourceB() {
    return new Promise(resolve => {
        const delay = Math.random() * 800 + 200; // 200ms - 1000ms
        setTimeout(() => {
            console.log('数据源B完成');
            resolve('数据来自源B');
        }, delay);
    });
}

function fetchDataFromSourceC() {
    return new Promise((resolve, reject) => {
        const delay = Math.random() * 1200 + 100; // 100ms - 1300ms
        setTimeout(() => {
            if (delay < 700) { // 有一定几率失败
                console.log('数据源C失败');
                reject(new Error('源C连接超时或出错'));
            } else {
                console.log('数据源C完成');
                resolve('数据来自源C');
            }
        }, delay);
    });
}

// 使用 Promise.race 竞速
console.log('开始竞速...');
Promise.race([
    fetchDataFromSourceA(),
    fetchDataFromSourceB(),
    fetchDataFromSourceC()
])
.then(result => {
    console.log('竞速结果：', result);
})
.catch(error => {
    console.error('竞速中出现错误：', error.message);
});

// 输出示例：
// 开始竞速...
// (某个源先完成或失败)
// 数据源B完成
// 竞速结果： 数据来自源B
// (其他源可能随后完成，但它们的resolve/reject不会影响race的结果)
// 数据源A完成
// 数据源C完成

在这个例子里，无论哪个函数先完成（或者先抛出错误），Promise.race 都会立刻响应。它非常适合那种“我只要最快的结果，不管它是什么”的场景。

Promise.race与Promise.any有什么区别？

这个问题经常被问到，因为它们听起来有点像，都是关于“多个 Promise 中选一个”。但核心区别在于它们对“胜出”的定义。

Promise.race，就像我们前面说的，是“第一个确定状态的 Promise 赢”。这个“确定状态”可以是 resolve（成功），也可以是 reject（失败）。所以，如果你的竞速队列里有一个 Promise 很快就失败了，那么 Promise.race 会立即以这个失败的理由 reject。它不关心其他 Promise 是否会成功，或者是否会更快地成功。它只认第一个到达终点线的。

而 Promise.any 则不同。它的设计理念是“我只要任何一个成功的 Promise”。它会等待，直到有第一个 Promise 成功解决（resolved）。如果所有的 Promise 都失败了（rejected），那么 Promise.any 才会以一个 AggregateError 类型的错误 reject，这个错误会包含所有失败的原因。你可以把它想象成一个“容错”机制，只要有一个能成功，我就接受。

来看个对比的例子：

const p1 = new Promise((resolve, reject) => setTimeout(() => reject('P1 失败'), 100));
const p2 = new Promise(resolve => setTimeout(() => resolve('P2 成功'), 200));
const p3 = new Promise(resolve => setTimeout(() => resolve('P3 成功'), 50)); // 最快成功

// Promise.race 的行为
Promise.race([p1, p2, p3])
    .then(result => console.log('Race 结果:', result))
    .catch(error => console.error('Race 错误:', error));
// 预期输出：Race 错误: P1 失败 (因为p1最快失败了)

// Promise.any 的行为
Promise.any([p1, p2, p3])
    .then(result => console.log('Any 结果:', result))
    .catch(error => console.error('Any 错误:', error));
// 预期输出：Any 结果: P3 成功 (p1虽然失败了，但any会等第一个成功的，p3最快成功)

// 如果所有都失败了，Promise.any 会这样：
const p4 = new Promise((resolve, reject) => setTimeout(() => reject('P4 失败'), 100));
const p5 = new Promise((resolve, reject) => setTimeout(() => reject('P5 失败'), 200));

Promise.any([p4, p5])
    .then(result => console.log('Any 结果 (所有失败):', result))
    .catch(error => {
        console.error('Any 错误 (所有失败):', error);
        // error 是一个 AggregateError，可以通过 error.errors 访问所有子错误
        console.error('所有错误详情:', error.errors.map(e => e.message));
    });
// 预期输出：Any 错误 (所有失败): AggregateError: All promises were rejected
// 所有错误详情: [ 'P4 失败', 'P5 失败' ]

在我看来，理解这两者的差异，关键在于你对“失败”的态度。race 对失败是零容忍的，只要有失败冲线，整个就失败。any 则更宽容，它会跳过失败，直到找到一个成功。

Promise.race在实际开发中能解决哪些痛点？

Promise.race 在实际开发中，最常见且最有价值的用途，就是实现超时机制。这是个实打实的痛点。我们经常会遇到这样的情况：某个 API 请求，或者某个耗时操作，你希望它能在一定时间内完成，如果超过这个时间，就认为它失败了，然后可以采取备用方案或者给用户一个提示。

没有 Promise.race 之前，实现超时逻辑会比较麻烦，可能需要用 setTimeout 和 clearTimeout 手动管理 Promise 的状态，代码会显得有点笨重。有了 Promise.race，这个过程变得异常优雅：

function requestWithTimeout(promise, timeoutMs) {
    // 创建一个超时 Promise
    const timeoutPromise = new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error(`操作超时，超过 ${timeoutMs}ms`));
        }, timeoutMs);
    });

    // 让原始 Promise 和超时 Promise 竞速
    return Promise.race([promise, timeoutPromise]);
}

// 模拟一个可能很慢的API请求
function callExternalAPI() {
    return new Promise(resolve => {
        const delay = Math.random() * 1500 + 500; // 500ms - 2000ms
        console.log(`API请求预计耗时: ${delay.toFixed(0)}ms`);
        setTimeout(() => {
            console.log('外部API响应');
            resolve('外部API数据');
        }, delay);
    });
}

// 使用超时机制调用API
console.log('发起带超时的API请求...');
requestWithTimeout(callExternalAPI(), 1000) // 设置1秒超时
    .then(data => {
        console.log('成功获取数据:', data);
    })
    .catch(error => {
        console.error('请求失败或超时:', error.message);
    });

// 思考一下：如果API请求比超时快，race会取API的结果。如果超时先到，race会取超时的错误。
// 这种模式非常健壮，避免了请求无限等待的问题。

除了超时，它也能在一些需要“优选”的场景下发挥作用。比如，你可能有一个主数据源，但为了容错或者提升用户体验，你还维护了一个备用数据源。你可以让它们同时发起请求，谁先返回就用谁的。当然，这种场景下，如果备用源返回的是错误，你可能不希望它直接导致整个 race 失败，所以有时候 Promise.any 会更合适。但如果你的策略是“谁快谁是王，哪怕是错误”，那 race 依然是首选。

使用Promise.race时需要注意哪些潜在问题或陷阱？

尽管 Promise.race 很好用，但它也不是万能药，使用时有几个点需要我们特别留意。

一个最容易被忽略的“陷阱”是：那些“输掉”比赛的 Promise 不会被取消。它们会继续在后台执行，直到它们自己的状态确定。这可能导致一些不必要的资源浪费，或者产生意想不到的副作用。

举个例子，如果你的某个 Promise 涉及到上传一个大文件，或者进行一个复杂的计算，即使它在 Promise.race 中输了，这个上传或计算过程并不会停止。它会继续消耗网络带宽或 CPU 资源。在某些对性能或资源敏感的应用中，这可能是一个问题。

function uploadBigFile() {
    console.log('开始上传大文件...');
    return new Promise(resolve => {
        // 模拟一个很慢的上传过程
        setTimeout(() => {
            console.log('大文件上传完成！');
            resolve('文件上传成功');
        }, 5000); // 假设需要5秒
    });
}

function showQuickMessage() {
    console.log('显示快速消息...');
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('快速消息已显示！');
            resolve('消息已显示');
        }, 500); // 0.5秒
    });
}

console.log('开始竞速：文件上传 vs 快速消息');
Promise.race([
    uploadBigFile(),
    showQuickMessage()
])
.then(result => {
    console.log('Race 结果:', result);
})
.catch(error => {
    console.error('Race 错误:', error);
});

// 预期输出：
// 开始竞速：文件上传 vs 快速消息
// 开始上传大文件...
// 显示快速消息...
// 快速消息已显示！
// Race 结果: 消息已显示
// (5秒后) 大文件上传完成！
// 注意：即使 race 已经返回了结果，uploadBigFile 仍在后台运行并最终完成。

这告诉我们，如果你有需要取消的异步操作（比如网络请求），仅仅依赖 Promise.race 是不够的。你还需要结合像 AbortController 这样的机制，在 race 确定结果后，手动去取消那些“失败者”。

另一个需要注意的是错误处理。正如前面提到的，如果最快完成的 Promise 是一个 reject 状态的 Promise，那么 Promise.race 会立即 reject。这可能与你期望“只在所有都失败时才报错”的场景不符。在这种情况下，Promise.any 可能是更好的选择。所以，在使用 Promise.race 时，要清楚你对“失败”的容忍度。

总的来说，Promise.race 是一个强大且简洁的工具，尤其在处理超时和竞速场景时。但它的“赢者通吃”规则也意味着你需要留意那些“输掉”的 Promise 的生命周期，并根据实际需求考虑错误处理策略。

今天关于《JavaScript Promise.race竞速异步任务详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！