Whatwg Fetch fails when json parsing an empty response, how can I prevent it?

Question

I\'m using the Fetch API both in the frontend and on the backend (NodeJS), a problem that I\'ve been facing a lot happens when parsing the response as json.

respon

Answer 1

Since response.json() returns a Promise, You can handle the error with catch and return a dummy data object.

fetch('url').then(response => { 
  return response.json().catch(err => {
    console.error(`'${err}' happened, but no big deal!`);
    return {};
  });
}).then(data => {
  console.log(data); 
});

Update

As mentioned below, if you try to read response twice, you'll get an error: TypeError: Already Read.

As a workaround, it you can clone the original response and call json on the cloned object.

fetch('url').then(response => {
  const responseCopy = response.clone();
  return responseCopy.json().catch(_ => response.text());
}).then(data => {
  console.log(data); 
});

Answer 2

Once you have the Response object, inspect the headers and see what Content-Length says. Based on that you can know whether or not there is something to parse. But also, it seems bogus for the server to return an application/json resource that is empty, as that is not JSON.

Answer 3

It is easy, just check response body type like below:

var contentType = response.headers.get('content-type')
        if (contentType && contentType.indexOf('application/json') !== -1) {
            return response.json();
        }else{
            //if response is not json and mostly empty
            return({})
        }

it return empty object if response was null

Answer 4

Why you don't handle error with try catch

try {
    body = JSON.parse(body)
} catch (err) {

}