React调用Node.js REST API返回400时无法获取errorDesc问题

你在React项目里调用Node.js REST API时，遇到了400状态码返回的错误信息无法获取的问题，具体是拿不到响应里的errorDesc字段。

400错误API响应 #

{
  "errorCode": "M400",
  "message": "Invalid Request",
  "errorDesc": "missing required first name field"
}

原React代码 #

fetch(URL, {
            method: 'POST',
            body: data
        })
            .then(response => {
                if (!response.ok) {
                    if (response.status == 400) {
                        Modal.error({
                            className: "ErrorModal",
                            title: "Error",
                            content: "Invalid Request.",
                        });
                    }
                    return Promise.reject(response.statusText);
                }
                return response.json();
            })
            .then(status => {
                
            })
            .catch(error => {
                console.log(error);
            });

问题原因 #

你当前的代码在response.ok为false时（也就是400这类错误状态），直接reject了response.statusText，但没有解析响应体里的JSON数据，所以根本拿不到errorDesc字段。

解决方案 #

在处理400错误时，先调用response.json()解析响应体，拿到包含errorDesc的错误对象，再用这个对象做弹窗提示并reject：

fetch(URL, {
    method: 'POST',
    body: data
})
.then(response => {
    if (!response.ok) {
        // 解析错误响应体
        return response.json().then(errorData => {
            if (response.status === 400) {
                Modal.error({
                    className: "ErrorModal",
                    title: "Error",
                    content: errorData.errorDesc || "Invalid Request.",
                });
            }
            // 将错误数据传递到catch中
            return Promise.reject(errorData);
        });
    }
    return response.json();
})
.then(status => {
    // 处理成功响应
})
.catch(error => {
    console.log(error);
});

说明 #

1. 当响应状态码为400时，先通过response.json()解析API返回的错误JSON，从中提取errorDesc作为弹窗内容
2. 如果errorDesc不存在，就用默认的"Invalid Request."作为 fallback
3. 把解析后的错误对象传递到catch块，方便后续的错误日志或其他处理

内容的提问来源于stack exchange，提问作者Maria Jeysingh Anbu