使用 Body.json() Promise 处理非 JSON 响应

Question

我正在尝试创建一个方案来拦截和处理来自 API 中间件的请求，但是，无论出于何种原因，我无法正确处理来自 API 端点的非 JSON 响应。以下代码片段适用于 JSON 格式的服务器响应，但是假设用户具有无效令牌，服务器会返回一个简单的未经授权访问响应，即使我向 json() 承诺提供错误回调，我也无法处理该响应。在下面的方案中，未授权访问响应消息会丢失。

    const callAPI = () => { fetch('http://127.0.0.1:5000/auth/', {
        method: 'GET',
        headers: {
            'credentials': 'include',
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Basic bXlKaGJHY2lPaUpJVXpJMU5pSXNJbVY0Y0NJNk1UUTVPRE15TVRNeU5pd2lhV0YwSWpveE5EazRNak0wT1RJMmZRLmV5SnBaQ0k2TVgwLllFdWdKNF9YM0NlWlcyR2l0SGtOZGdTNkpsRDhyRE9vZ2lkNGVvaVhiMEU6'
        }
    });
    };

    return callAPI().then(res => {
        return res.json().then(responseJSON => {
            if(responseJSON.status === 200){
                return dispatch({
                    type: type[1],
                    data: responseJSON,
                    message: success
                });
            } else if(responseJSON.status === 401) {
                return dispatch({
                    type: type[2],
                    message: responseJSON.message
                });
            }
            return Promise.resolve(json);
        }, (err) => {
            console.log(err.toString(), ' an error occured');
        });
    }, err => {
        console.log('An error occured. Please try again.');
    });

Answer 1

尝试使用Body的文本方法：

res.text()

。

Answer 2

尝试将响应处理代码包装在

try...catch

块中，如下所示：

return callAPI().then(res => {
    try {
        return res.json().then(responseJSON => {
            [...]
    catch(e) {
        console.error(e);
    }
});

当正文实际上不是 JSON 时，

Body.json()

会抛出异常。因此，您应该在调用 json() 之前检查主体是否包含 JSON。请参阅

https://developer.mozilla.org/en-US/docs/Web/API/Response

。

Answer 3

response.clone().json().catch(() => response.text())

，如下所述

       fetch('/file')
         .then(response => 
             response.clone().json().catch(() => response.text())
         ).then(data => {
            // data is now parsed JSON or raw text
          });
   

通过使用 

response.clone()

我们可以创建响应的副本以解析为 JSON，如果失败，我们将原始响应解析为文本。 感谢

Steven Lambert

的文章 JSON with Text Fallback 和 Jake Archibald 的详细文章 阅读回复