fetch() 收到 http 404 时通常仍会返回一个 response，所以不会自动进入 catch。先检查 response.ok，遇到非 2xx 响应主动抛出错误，再解析成功响应。

先检查 HTTP 状态，再解析 JSON

给错误对象保留状态码，调用方可以识别来自 HTTP 的失败。

async function getJson(url, fetcher = fetch) {
    const response = await fetcher(url);
    if (!response.ok) {
        const error = new Error(`HTTP ${response.status}`);
        error.status = response.status;
        throw error;
    }
    return response.json();
}

网络失败会从 fetch 本身抛出，成功状态下的无效 JSON 则会从 json() 抛出。

在控制台验证三条路径

在支持 Response 的现代浏览器执行。注入响应函数，无需访问外部接口。

async function checkCases() {
    const cases = [[200, '{"ok":true}'], [404, '{}'], [200, 'not json']];
    for (const [status, body] of cases) {
        try {
            const result = await getJson("/demo",
                async () => new Response(body, { status }));
            console.log(result);
        } catch (error) {
            console.log(error.status ?? error.name);
        }
    }
}
checkCases();

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

依次得到对象 {ok: true}、404 和 SyntaxError。

处理允许没有响应体的接口

若接口约定删除成功返回 204，应在解析前处理空响应。可把下面判断加在 return response.json() 前。

if (response.status === 204) {
    return null;
}

普通的 200 JSON 接口保持原解析流程。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南