How to get the response json on HTTP error 400+ ?

Suppose I create a request to http://example.com/404, and the response is 404 status code with a json response like this:

{
  "type": "error",
  "message": "What you were looking for isn't here."
}

How can I get the above json using fetch?

[nikravi]

Here is the code similar to @lasergoat, but handles json regardless of the response.status. Also in case of network error, rejects with a custom error object

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON, status from the response
 */
function parseJSON(response) {
  return new Promise((resolve) => response.json()
    .then((json) => resolve({
      status: response.status,
      ok: response.ok,
      json,
    })));
}

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {Promise}           The request promise
 */
export default function request(url, options) {
  return new Promise((resolve, reject) => {
    fetch(endpoint  + url, options)
      .then(parseJSON)
      .then((response) => {
        if (response.ok) {
          return resolve(response.json);
        }
        // extract the error from the server's json
        return reject(response.json.meta.error);
      })
      .catch((error) => reject({
        networkError: error.message,
      }));
  });
}

[lasergoat]

Hey, just want to let you know, I settled on a fair way of doing what I needed. I thought I’d post just in case anyone else ends up in a situation similar to me where they couldn’t use a catch because fetch gives a ReadableByteStream instead of a json object.

// filename: api.js

export default function api(uri, options = {}) {

  options.headers = {
    'Accept': 'application/json',
    'Authorization': `Bearer ${token}`
  };

  return new Promise((resolve, reject) => {

    fetch(endpoint + uri, options)

      .then(response => {

        if (response.status === 200) {

          return resolve(response.json());

        } else {

          return reject(response.status, response.json());

        }
      });
  });

}

This solution keeps your code clean and semantic. You use it like this:

    api(`user/${id}`).then(result => {
      console.log('success');
      dispatch(receiveUser(result))
    })
    .catch((status, err) => {
      console.log('err');
      console.log(err);
    });