catch块内的return似乎被忽略？请求报错后代码延迟执行

核心问题1：fetch不会因HTTP错误码触发catch #

fetch API只有在网络层面出错（比如断网、域名不存在）时才会抛出异常进入catch。如果服务器返回4xx/5xx这类HTTP错误码，fetch不会报错，代码会继续执行await response.json()——如果服务器此时没有返回完整的响应体（比如卡住了），这行代码会一直等待直到连接超时，这就是你看到0.5秒报错但if语句等2分钟的原因。

核心问题2：fetch默认无超时限制 #

浏览器中fetch的默认超时时间很长（通常是几分钟），如果服务器没主动关闭连接，请求会一直挂着，直到达到浏览器的超时上限。

解决步骤 #

1. 先判断HTTP响应状态，手动抛出错误
   在解析JSON前先检查response.ok，如果是false（即HTTP错误码），主动抛出异常进入catch，这样就能及时返回null，不用等解析JSON：

async function funcOne() {
    try {
        const response = await fetch(`URL_API`, {
        });
        // 新增：检查HTTP响应状态
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        const data = await response.json();
        return data;
    }
    catch(error) {
        console.log(error);
        return null;
    }
}

2. 给fetch添加超时限制
   用AbortController给请求设置超时时间，比如5秒，超时后主动终止请求，直接进入catch：

async function funcOne() {
    const controller = new AbortController();
    // 设置5秒超时
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
        const response = await fetch(`URL_API`, {
            signal: controller.signal // 绑定信号
        });
        clearTimeout(timeoutId); // 请求成功则清除超时定时器

        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        const data = await response.json();
        return data;
    }
    catch(error) {
        console.log(error);
        return null;
    }
}

这样修改后，无论是HTTP错误还是请求超时，都会在短时间内进入catch并返回null，main函数里的if语句就能及时执行了。

内容的提问来源于stack exchange，提问作者tank bank