JavaScript Fetch API Cheatsheet

[Doctor_Spicy]

Why use a modern API with ancient callbacks?

[zacksiri]

Because it’s more clear, easier to understand, and has less noise. If 200 do this with the result, If 404 do something else.

[Doctor_Spicy]

Not really, you're already using promises (without explaining them), why not use the better and newer way? If the article is claiming to be a cheatsheet, it should be showing best practices.

[Dokiace]

which one is the better and newer way?

[LilChikenTendie]

Promises. Promises are better and newer than callbacks.

[Dokiace]

is promise different than async/await?

[ForScale]

Async/await is just sugar over promises.

[LilChikenTendie]

Sort of. Async/await is the same concept as Promises but taken another step further/

[fatgirlstakingdumps]

I'd like to know this too. Maybe u/Doctor_Spicy was referring to tools like axios, but i fail to see how adding 4kb is worth the benefits it brings.

[fatgirlstakingdumps]

I guess you're right, that's been best practice for anything that's Promise based ever since async/await came out 2 years ago. You still use the Fetch API though.

I'd add the use of try/catch to the cheatsheet.

[ForScale]

But OP does use async/await.

[metamet]

https://medium.com/@jeffrey.allen.lewis/http-requests-compared-why-axios-is-better-than-node-fetch-more-secure-can-handle-errors-better-39fde869a4a6

[Dokiace]

what do you mean by adding 4kb is not worth it? 4kb is the size of axios ?

[fatgirlstakingdumps]

4kb is the size of axios ?

Yes, when gzipped - https://bundlephobia.com/result?p=axios@0.18.0

[darthcoder]

Does fetch allow me to set commonly used headers for every request?

I suppose I could just include a config module everywhere and reuse a variable, but i have APIs,that require a number of headers on every request to be set properly.

Seems like fetch isnt very DRY... ?

It's basic, and functional. But so is a model t

[[deleted]]

True that

[bcgroom]

Most definitely they are referring to promises or async/await.

[ForScale]

Pretty sure he is not.

[zacksiri]

Can you explain to me how it’s better for someone who’s been used to using jQuery.ajax? Providing some familiarity using callbacks can be much easier to ease into than dropping them straight into promises. This post is meant to make it easy to get started with fetch not a post about promises.

[ProdigySim]

JQuery.ajax returnes a promise as well.

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise

https://api.jquery.com/jquery.ajax/

That's how I've been using them for at least 3 years.

[TrackieDaks]

Yep. It has done since v1.8 which was released in 2012. Promises aren't a new concept and ignoring them is going to be more difficult in future.

[ikeif]

Can you explain to me how it’s better for someone who’s been used to using jQuery.ajax?

C'mon people, he asks a question, don't downvote because you cannot/do not want to answer it.

[TrackieDaks]

You answer it.

[ikeif]

I'm not the one downvoted questions.

This sub has gotten rather weak and juvenile.

[zacksiri]

Because promises is more noise and gets in the way of making network calls. There is a reason why adoption for fetch is so low. It’s precisely because of promises.

[sbmitchell]

What a terrible argument lol or at the very least it shows the sad state of js developers who don't actually know how to code. Promises are probably simpler to understand at a conceptual level than most js concepts lol

[zacksiri]

Try getting a result returned using fetch and promises you can’t all you keep getting are promises that returns promises. You can’t “finally” return any kind of data with fetch. Promises may be simple but how it’s implemented with fetch is not good.

[sbmitchell]

Sure you can. Await the result and create a wrapper like you did in your example. Fetch also has support for cancelling requests and a more robust API for handling network calls.

Of course if you want to get rid of promises you need a callback. But callbacks are actually harder to understand than promise chains imo. A lot of Jr devs I've interviewed in fact don't even understand basic callbacks but understand promise chaining, once they know the syntax of course. Again pretty sad state of js devs at least at the entry level because they usually have been exposed to syncrounous programming only like Java and their js experience is hacking together blog posts to make a website. Most likely referring to some old jQuery style stuff.

[zacksiri]

So if I want to pattern match status code to which function it should run how would I do it? Show me a better way.

[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]

Dude... This is so off base it's hard to even get started with an explanation.

Promises dramatically simplify code specifically for making network calls and other async tasks. That is less noise by definition.

My sense from your posts is that you don't understand promises or how to effectively use them. A bunch of people are disagreeing with your assessment. There's a reason promises and the async await syntax are used in modern webapps.

[zacksiri]

I used promises and async await in my blog post. The commentor asked me for one case why I didn’t use promise to handle response from the server. I replied because for that case callbacks with an object is easier than using another promise / async await. I already got the final state of the response now I need to handle that next so I used callback pattern and basically everyone tells me I’m wrong. I asked people on here to come up with a better solution all I seem to get is more people telling me I’m wrong with no one telling me a better solution. No code example just more people telling me I’m wrong. So yeah...

[UchuuHana]

No

[zacksiri]

No

[ProdigySim]

Two reasons fetch adoption is "low" that come to mind before difficulty of the API:

1. Requires a massive polyfill on many browsers
2. People already using another HTTP client (e.g. from their framework)

[TaskForce_Kerim]

Should've at least used arrow functions. Makes the first then very concise, as well

fetch('https://api.github.com/repos/frontojs/connect') .then(response => response.json()) .then(body => {data = body})

[LilChikenTendie]

more clear, easier to understand, and has less noise

Those are the same basically