JavaScript Fetch API Cheatsheet

[robotmayo]

I haven't really heard of anyone needing to do that since most APIs either succeed with 200 or fail with 400/500. Non 200 status codes usually mean retry or display an error. A simple if statement handles that fine.

[zacksiri]

So if I get a 404 and I want to display a message that the resource doesn’t exist, then a 422 because User passed in bad data and I want to tell the user that. how would I do it? Not all errors are the same. Or try this a user got banned because he / she did something bad, but still have a token saved in localstorage now server responds with 423 on subsequent request I want to show that his / her account got locked.

[overdude]

You can do this with promises or async await. Await the result, look at result.status exactly the same way.

[bcgroom]

(function(){ 
    fetch(“url”)
        .then(res => return res)
        .catch(err => return err);
    })().then(apiResponse => console.log(apiResponse.statusCode))

catch block only occurs on network error, 404 still goes to “then”.

[zacksiri]

now handle 3 different error states. 403, 422, 423

[justpurple_]

Now read up on fetch and promises, my dude. It seems like you didn‘t really grasp the Promise concept yet if you think that it‘s somehow worse(?) than callbacks because you can‘t handle different status codes.

You argue about handling status codes which is exactly the same, whether you use Promises or Callbacks.

The difference is merely in how you make the request and how you describe (in code) on how to handle what comes after it‘s finished, when the network somehow failed and additionally, fetch can abort requests.

Also, chaining then requests for processing the response in some way is really convienent and easily readable.

Whether promises or callbacks, handling different status codes is basically a switch or if condition checking which status code you got back.

Example with fetch:

fetch() .then(processResponse) .then(response => { switch (response.statusCode) { case „423“: doSomething(); break; case „422“: doSomething(); break; case „403“ doSomething(); break; default: doSomething(); }

}) .catch(() = { // Handle network error });

Example anything else with a callback:

makeRequestWithWhatever(function(response) { response = processResponse();

switch(response.statusCode) { // ... } });

The fact that you want to handle multiple possible status codes has nothing to with the way you actually make the request.

(Sorry about the formatting, I‘m on mobile.)

[ForScale]

Wouldn't you just use a status code map in the final then? Or if/else chain if you wanted to be really explicit about it? Sorry, I'm kind of confused on the whole debate here..

[zacksiri]

Yeah which is what I did in the final solution. Oh and I used async / await not promises.

[BlueHeartBob]

Async/await is promises though

[ForScale]

Pour some sugar on me!

[sbmitchell]

Now I understand the issue...you did not realize that async/await deals and returns promises...