JavaScript中异步操作的超时处理

// 方案一：Promise.race 结合 setTimeout
function withTimeout(promise, ms) {
    // 创建一个在指定毫秒后拒绝的Promise
    const timeout = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error(`Operation timed out after ${ms} ms`));
        }, ms);
    });

    // 使用Promise.race，哪个Promise先完成（解决或拒绝），就采纳哪个结果
    return Promise.race([
        promise,
        timeout
    ]);
}

// 示例用法
async function fetchData() {
    console.log('开始获取数据...');
    try {
        const data = await withTimeout(
            fetch('https://api.example.com/data'), // 假设这是一个可能很慢的API
            3000 // 3秒超时
        );
        const jsonData = await data.json();
        console.log('数据获取成功:', jsonData);
    } catch (error) {
        console.error('数据获取失败或超时:', error.message);
        // 这里可以根据error.message判断是超时还是其他错误
    }
}

// fetchData();

// 方案二：使用 AbortController (更适合可取消的Fetch请求等)
async function fetchWithAbortControllerTimeout(url, ms) {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), ms); // 设置超时，超时后调用abort

    try {
        const response = await fetch(url, { signal: controller.signal });
        clearTimeout(id); // 请求成功，清除超时定时器
        const data = await response.json();
        console.log('数据获取成功 (AbortController):', data);
        return data;
    } catch (error) {
        clearTimeout(id); // 捕获到错误，也清除定时器
        if (error.name === 'AbortError') {
            console.error('请求超时 (AbortController):', `Operation timed out after ${ms} ms`);
            throw new Error(`Operation timed out after ${ms} ms`);
        } else {
            console.error('请求失败 (AbortController):', error.message);
            throw error;
        }
    }
}

// 示例用法
async function fetchDataWithAbort() {
    console.log('开始使用 AbortController 获取数据...');
    try {
        await fetchWithAbortControllerTimeout('https://api.example.com/data', 3000);
    } catch (error) {
        console.error('处理 AbortController 异常:', error.message);
    }
}

// fetchDataWithAbort();

function withTimeout(promise, ms) {
    // 这是一个计时器，它在ms毫秒后会拒绝
    const timeout = new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error(`操作超时，超过 ${ms} 毫秒`));
        }, ms);
    });

    // 谁先完成（成功或失败），就用谁的结果
    return Promise.race([
        promise, // 你的实际异步操作
        timeout  // 你的超时计时器
    ]);
}

// 实际使用：
async function doSomethingThatMightTimeout() {
    try {
        const result = await withTimeout(
            new Promise(resolve => setTimeout(() => resolve("操作成功！"), 5000)), // 模拟一个5秒的操作
            3000 // 但我们只给它3秒
        );
        console.log(result);
    } catch (error) {
        console.error("出错了:", error.message); // 会捕获到“操作超时”的错误
    }

    try {
        const result = await withTimeout(
            new Promise(resolve => setTimeout(() => resolve("这次很快！"), 1000)), // 模拟一个1秒的操作
            3000 // 仍然给它3秒
        );
        console.log(result); // 会成功打印“这次很快！”
    } catch (error) {
        console.error("出错了:", error.message);
    }
}

// doSomethingThatMightTimeout();

async function fetchUserWithTimeout(userId, ms) {
    const controller = new AbortController();
    const signal = controller.signal;

    // 设置一个定时器，在指定时间后中止请求
    const timeoutId = setTimeout(() => controller.abort(), ms);

    try {
        console.log(`尝试获取用户 ${userId} 数据，超时时间 ${ms}ms...`);
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, { signal });
        clearTimeout(timeoutId); // 请求成功，清除超时定时器

        if (!response.ok) {
            throw new Error(`HTTP 错误！状态码: ${response.status}`);
        }
        const user = await response.json();
        console.log('用户数据获取成功:', user);
        return user;
    } catch (error) {
        clearTimeout(timeoutId); // 无论成功失败，都清除定时器

        if (error.name === 'AbortError') {
            console.error(`获取用户 ${userId} 数据超时，超过 ${ms}ms`);
            throw new Error(`请求超时: ${error.message}`);
        } else {
            console.error(`获取用户 ${userId} 数据失败:`, error.message);
            throw error;
        }
    }
}

// 模拟一个超时场景 (例如，请求一个不存在的ID，或故意设置很短的超时)
// fetchUserWithTimeout(1, 100); // 假设这个ID很快就能返回，但我们设置了超短的超时
// fetchUserWithTimeout(999, 2000); // 请求一个可能不存在的ID，或者本身响应慢的

// 模拟一个成功场景
// fetchUserWithTimeout(1, 5000);