javascript - Handling non JSON response with a Body.json() promise - Stack Overflow

admin管理员组

文章数量:1279242

I'm trying to create a scheme to intercept and handle requests from an API middleware, however, for whatever reason I'm unable to properly handle non JSON responses from my API endpoint. The following snippet works just fine for server responses formatted in JSON however say an user has an invalid token, the server returns a simple Unauthorized Access response that I'm unable to handle even though I am supplying an error callback to the json() promise. The Unauthorized Access response message is lost in the following scheme.

    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.');
    });

I'm trying to create a scheme to intercept and handle requests from an API middleware, however, for whatever reason I'm unable to properly handle non JSON responses from my API endpoint. The following snippet works just fine for server responses formatted in JSON however say an user has an invalid token, the server returns a simple Unauthorized Access response that I'm unable to handle even though I am supplying an error callback to the json() promise. The Unauthorized Access response message is lost in the following scheme.

    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.');
    });

• javascript
• json
• redux
• es6-promise

Share Improve this question Follow asked Jun 24, 2017 at 10:54 Bryan CharlieBryan Charlie 19533 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Try using text method of Body: res.text().

Try using response.clone().json().catch(() => response.text()) as stated below

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

By using response.clone() we can create a copy of the response to parse as JSON, and if that fails we parse the original response as text.

Thanks to Steven Lambert for his article JSON with Text Fallback and Jake Archibald for his detailed article on Reading responses

Try to wrap your response handling code in a try...catch block like this:

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

Body.json() throws when the body is actually not JSON. Therefore, you should check if the body contains JSON before you call json() on it. See https://developer.mozilla/en-US/docs/Web/API/Response.

本文标签： javascriptHandling non JSON response with a Bodyjson() promiseStack Overflow