Qfyilyi

I have an HTTP API that returns JSON data both on success and on failure.

An example failure would look like this:

~ ◆ http get http://localhost:5000/api/isbn/2266202022 

HTTP/1.1 400 BAD REQUEST

Content-Length: 171

Content-Type: application/json

Server: TornadoServer/4.0



{

    "message": "There was an issue with at least some of the supplied values.", 

    "payload": {

        "isbn": "Could not find match for ISBN."

    }, 

    "type": "validation"

}

What I want to achieve in my JavaScript code is something like this:

fetch(url)

  .then((resp) => {

     if (resp.status >= 200 && resp.status < 300) {

       return resp.json();

     } else {

       // This does not work, since the Promise returned by `json()` is never fulfilled

       return Promise.reject(resp.json());

     }

   })

   .catch((error) => {

     // Do something with the error object

   }

 // This does not work, since the Promise returned by `json()` is never fulfilled

return Promise.reject(resp.json());

Well, the resp.json promise will be fulfilled, only Promise.reject doesn't wait for it and immediately rejects with a promise.

I'll assume that you rather want to do the following:

fetch(url).then((resp) => {

  let json = resp.json(); // there's always a body

  if (resp.status >= 200 && resp.status < 300) {

    return json;

  } else {

    return json.then(Promise.reject.bind(Promise));

  }

})

(or, written explicitly)

    return json.then(err => {throw err;});

Here's a somewhat cleaner approach that relies on response.ok and makes use of the underlying JSON data instead of the Promise returned by .json().

function myFetchWrapper(url) {

  return fetch(url).then(response => {

    return response.json().then(json => {

      return response.ok ? json : Promise.reject(json);

    });

  });

}



// This should trigger the .then() with the JSON response,

// since the response is an HTTP 200.

myFetchWrapper('http://api.openweathermap.org/data/2.5/weather?q=Brooklyn,NY').then(console.log.bind(console));



// This should trigger the .catch() with the JSON response,

// since the response is an HTTP 400.

myFetchWrapper('https://content.googleapis.com/youtube/v3/search').catch(console.warn.bind(console));

The solution above from Jeff Posnick is my favourite way of doing it, but the nesting is pretty ugly.

With the newer async/await syntax we can do it in a more synchronous looking way, without the ugly nesting that can quickly become confusing.

async function myFetchWrapper(url) {

  const response = await fetch(url);

  const json = await response.json();

  return response.ok ? json : Promise.reject(json);

}

This works because, an async function always returns a promise and once we have the JSON we can then decide how to return it based on the response status (using response.ok).

You would error handle the same way as you would in Jeff's answer, or you could use try/catch, or even an error handling higher order function.

const url = 'http://api.openweathermap.org/data/2.5/weather?q=Brooklyn,NY'



// Example with Promises

myFetchWrapper(url)

  .then((res) => ...)

  .catch((err) => ...);



// Example with try/catch (presuming wrapped in an async function)

try {

  const data = await myFetchWrapper(url);

  ...

} catch (err) {

  throw new Error(err.message);

}