如何在Promise.race()中处理超时后的操作？

在 Promise.race() 里处理超时后的操作，你可以创建一个超时 Promise，将它和其他异步操作的 Promise 一起传入 Promise.race() 方法。若超时 Promise 率先完成，就说明异步操作超时了，这时你就能在 catch 块里处理超时后的操作。下面为你详细介绍实现步骤与示例代码。

实现步骤

1. 创建异步操作的 Promise：创建代表异步操作的 Promise 实例。
2. 创建超时 Promise：创建一个在指定时间后失败的 Promise，以此来模拟超时情况。
3. 使用 Promise.race()：把异步操作的 Promise 和超时 Promise 一起传入 Promise.race() 方法。
4. 处理结果：在 then 块里处理异步操作成功的情况，在 catch 块里处理超时或其他错误情况。

示例代码

// 模拟一个异步操作，返回一个 Promise
function asyncOperation() {
   
    return new Promise((resolve) => {
   
        // 模拟一个耗时的异步操作，这里设置为 3 秒
        setTimeout(() => {
   
            resolve('异步操作完成');
        }, 3000);
    });
}

// 创建一个超时 Promise
function timeout(ms) {
   
    return new Promise((_, reject) => {
   
        setTimeout(() => {
   
            reject(new Error('操作超时'));
        }, ms);
    });
}

// 设置超时时间为 2 秒
const timeoutDuration = 2000;

// 使用 Promise.race() 处理异步操作和超时
Promise.race([asyncOperation(), timeout(timeoutDuration)])
   .then((result) => {
   
        console.log('异步操作成功:', result);
    })
   .catch((error) => {
   
        if (error.message === '操作超时') {
   
            console.log('操作超时，执行超时后的操作');
            // 这里可以添加超时后要执行的具体操作，比如重试、提示用户等
        } else {
   
            console.error('异步操作出错:', error);
        }
    });

代码解释

1. asyncOperation 函数：模拟一个耗时的异步操作，返回一个 Promise，在 3 秒后成功解决并返回结果。
2. timeout 函数：创建一个在指定时间（ms）后失败的 Promise，模拟超时情况。
3. Promise.race()：将 asyncOperation() 和 timeout(timeoutDuration) 传入 Promise.race() 方法，并行执行这两个 Promise。
4. 处理结果：
   • 若 asyncOperation() 率先完成，then 块会被调用，输出异步操作的结果。
   • 若 timeout(timeoutDuration) 率先完成，说明操作超时，catch 块会被调用，判断错误信息是否为 操作超时，如果是，则执行超时后的操作。
   • 若 asyncOperation() 出现其他错误，catch 块也会被调用，输出错误信息。

通过这种方式，你就能在 Promise.race() 中处理超时后的操作了。