Svelte遇500状态码时如何获取响应自定义错误信息？

问题根源 #

1. response.json未执行调用：你的代码里写的是return response.json，这只是返回了JSON解析函数的引用，并没有执行解析操作，导致后续拿不到错误信息。
2. 状态判断逻辑错误：else if(status<=200 && status>300) 这个条件逻辑完全不成立，永远不会触发，自然无法处理错误状态。
3. Fetch错误机制误解：Fetch仅在网络层面出错时（比如服务器连不上）才会进入catch，像500这类HTTP状态码错误不会自动抛出异常，需要手动判断处理。

修正后的代码 #

errorHeader = 'Editing User....';
errorMessage = '';

try {
    const response = await fetch('http://localhost:8080/Manage-User', {
        method: 'PUT',
        body: JSON.stringify(mainBody),
        headers: {
            'Content-Type': 'application/json',
        }
    });

    // 无论状态码是否成功，先解析返回的JSON（后端错误也返回了JSON结构）
    const result = await response.json();
    const status = response.status;

    if (status >= 200 && status < 300) {
        errorHeader = "Success";
        errorMessage = '';
    } else {
        // 处理所有非成功状态，包括500
        errorHeader = "An error occured while editing the user";
        errorMessage = result.message;
    }
} catch (networkError) {
    // 处理网络错误（比如服务器宕机、跨域问题等）
    errorHeader = "Network Error";
    errorMessage = "Failed to connect to server";
}

关键修改点 #

• 用async/await简化流程：相比链式then，async/await更易读，也更方便处理多分支错误。
• 先解析JSON再判断状态：后端在500时返回了JSON格式的错误信息，所以无论状态如何都先解析，确保能拿到message字段。
• 修正状态判断逻辑：用else直接覆盖所有非2xx的状态，避免条件写错的问题。
• 添加网络错误捕获：用try/catch处理真正的网络异常，避免流程意外中断。

额外提示 #

如果后端在某些错误状态下没有返回JSON（比如极端情况），可以在解析前加个判断，避免解析失败：

let result = {};
if (response.headers.get('Content-Type')?.includes('application/json')) {
    result = await response.json();
}

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