如何在JavaScript Fetch的Catch中处理HTTP 500返回的JSON错误信息

你需要修改checkStatus函数的逻辑，让它在捕获到非成功响应时，先解析返回的JSON错误数据，再将这些数据传递到catch块中，这样就能用错误详情更新DOM元素了。

修改后的完整代码 #

function checkStatus(response) {
    if (response.ok) {
        return response;
    }
    // 解析错误响应的JSON数据，若解析失败则回退到状态文本
    return response.json()
        .then(errorData => {
            const error = new Error(`HTTP ${response.status} 错误`);
            // 将错误详情挂载到error对象上
            error.details = errorData;
            error.statusCode = response.status;
            throw error;
        })
        .catch(() => {
            // 解析JSON失败时，抛出原始状态文本
            throw new Error(response.statusText);
        });
}

fetch("/api/url")
    .then(checkStatus)
    .then(response => response.json())
    .then(data => {
        // 处理成功响应的逻辑
        document.getElementById('success-container').innerHTML = `操作完成：${data.result}`;
    })
    .catch(err => {
        const errorElement = document.getElementById('error-container');
        if (err.details) {
            // 使用返回的JSON错误属性更新DOM
            errorElement.innerHTML = `错误提示：${err.details.errorMsg}（错误码：${err.details.errorCode}）`;
        } else {
            // 处理网络错误或非JSON格式的错误响应
            errorElement.innerHTML = `请求失败：${err.message}`;
        }
    });

关键说明 #

• checkStatus函数不再直接抛出仅包含状态文本的错误，而是先解析响应体的JSON数据，把错误详情挂载到自定义Error对象的details属性后再抛出。
• 在catch块中，通过判断err.details是否存在，区分HTTP错误（带JSON详情）和其他错误（如网络故障），分别处理DOM更新逻辑。
• 增加了JSON解析失败的 fallback，确保即使服务器返回非JSON格式的500响应，代码也能正常处理。

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