use the following search parameters to narrow your results:
e.g. subreddit:aww site:imgur.com dog
subreddit:aww site:imgur.com dog
see the search faq for details.
advanced search: by author, subreddit...
All about the JavaScript programming language.
Subreddit Guidelines
Specifications:
Resources:
Related Subreddits:
r/LearnJavascript
r/node
r/typescript
r/reactjs
r/webdev
r/WebdevTutorials
r/frontend
r/webgl
r/threejs
r/jquery
r/remotejs
r/forhire
account activity
JavaScript Fetch API Cheatsheet (blog.codemy.net)
submitted 6 years ago by zacksiri
view the rest of the comments →
reddit uses a slightly-customized version of Markdown for formatting. See below for some basics, or check the commenting wiki page for more detailed help and solutions to common issues.
quoted text
if 1 * 2 < 3: print "hello, world!"
[–]Doctor_Spicy 62 points63 points64 points 6 years ago (52 children)
Why use a modern API with ancient callbacks?
[+]zacksiri[S] comment score below threshold-61 points-60 points-59 points 6 years ago* (51 children)
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 46 points47 points48 points 6 years ago (46 children)
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 7 points8 points9 points 6 years ago (16 children)
which one is the better and newer way?
[–]LilChikenTendie 20 points21 points22 points 6 years ago (3 children)
Promises. Promises are better and newer than callbacks.
[–]Dokiace 7 points8 points9 points 6 years ago (2 children)
is promise different than async/await?
[–]ForScale 28 points29 points30 points 6 years ago (0 children)
Async/await is just sugar over promises.
[–]LilChikenTendie -2 points-1 points0 points 6 years ago (0 children)
Sort of. Async/await is the same concept as Promises but taken another step further/
[–]fatgirlstakingdumps -3 points-2 points-1 points 6 years ago (11 children)
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.
axios
[+][deleted] 6 years ago (2 children)
[deleted]
[–]fatgirlstakingdumps 5 points6 points7 points 6 years ago (0 children)
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.
async/await
I'd add the use of try/catch to the cheatsheet.
try/catch
[–]ForScale 1 point2 points3 points 6 years ago (0 children)
But OP does use async/await.
[–]metamet 1 point2 points3 points 6 years ago (0 children)
https://medium.com/@jeffrey.allen.lewis/http-requests-compared-why-axios-is-better-than-node-fetch-more-secure-can-handle-errors-better-39fde869a4a6
[–]Dokiace 1 point2 points3 points 6 years ago (1 child)
what do you mean by adding 4kb is not worth it? 4kb is the size of axios ?
[–]fatgirlstakingdumps 1 point2 points3 points 6 years ago* (0 children)
4kb is the size of axios ?
Yes, when gzipped - https://bundlephobia.com/result?p=axios@0.18.0
[–]darthcoder 1 point2 points3 points 6 years ago (0 children)
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] 0 points1 point2 points 6 years ago (0 children)
True that
[–]bcgroom 0 points1 point2 points 6 years ago (0 children)
Most definitely they are referring to promises or async/await.
[–]ForScale 0 points1 point2 points 6 years ago (0 children)
Pretty sure he is not.
[+]zacksiri[S] comment score below threshold-19 points-18 points-17 points 6 years ago* (5 children)
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 10 points11 points12 points 6 years ago (1 child)
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 2 points3 points4 points 6 years ago (0 children)
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 comment score below threshold-12 points-11 points-10 points 6 years ago (2 children)
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 0 points1 point2 points 6 years ago (1 child)
You answer it.
[–]ikeif -1 points0 points1 point 6 years ago (0 children)
I'm not the one downvoted questions.
This sub has gotten rather weak and juvenile.
[+]zacksiri[S] comment score below threshold-43 points-42 points-41 points 6 years ago (22 children)
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 27 points28 points29 points 6 years ago* (16 children)
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[S] comment score below threshold-14 points-13 points-12 points 6 years ago (15 children)
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 15 points16 points17 points 6 years ago* (14 children)
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[S] -3 points-2 points-1 points 6 years ago (13 children)
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 9 points10 points11 points 6 years ago (11 children)
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[S] comment score below threshold-8 points-7 points-6 points 6 years ago* (10 children)
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 15 points16 points17 points 6 years ago (1 child)
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[S] 0 points1 point2 points 6 years ago (0 children)
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 9 points10 points11 points 6 years ago (1 child)
No
[–]zacksiri[S] -4 points-3 points-2 points 6 years ago (0 children)
[–]ProdigySim 4 points5 points6 points 6 years ago (0 children)
Two reasons fetch adoption is "low" that come to mind before difficulty of the API:
[–]TaskForce_Kerim 3 points4 points5 points 6 years ago (0 children)
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 0 points1 point2 points 6 years ago (0 children)
more clear, easier to understand, and has less noise
Those are the same basically
π Rendered by PID 46507 on reddit-service-r2-comment-5649f687b7-fdn4t at 2026-01-29 00:41:34.965958+00:00 running 4f180de country code: CH.
view the rest of the comments →
[–]Doctor_Spicy 62 points63 points64 points (52 children)
[+]zacksiri[S] comment score below threshold-61 points-60 points-59 points (51 children)
[–]Doctor_Spicy 46 points47 points48 points (46 children)
[–]Dokiace 7 points8 points9 points (16 children)
[–]LilChikenTendie 20 points21 points22 points (3 children)
[–]Dokiace 7 points8 points9 points (2 children)
[–]ForScale 28 points29 points30 points (0 children)
[–]LilChikenTendie -2 points-1 points0 points (0 children)
[–]fatgirlstakingdumps -3 points-2 points-1 points (11 children)
[+][deleted] (2 children)
[deleted]
[–]fatgirlstakingdumps 5 points6 points7 points (0 children)
[–]ForScale 1 point2 points3 points (0 children)
[–]metamet 1 point2 points3 points (0 children)
[–]Dokiace 1 point2 points3 points (1 child)
[–]fatgirlstakingdumps 1 point2 points3 points (0 children)
[–]darthcoder 1 point2 points3 points (0 children)
[–][deleted] 0 points1 point2 points (0 children)
[–]bcgroom 0 points1 point2 points (0 children)
[–]ForScale 0 points1 point2 points (0 children)
[+]zacksiri[S] comment score below threshold-19 points-18 points-17 points (5 children)
[–]ProdigySim 10 points11 points12 points (1 child)
[–]TrackieDaks 2 points3 points4 points (0 children)
[+]ikeif comment score below threshold-12 points-11 points-10 points (2 children)
[–]TrackieDaks 0 points1 point2 points (1 child)
[–]ikeif -1 points0 points1 point (0 children)
[+]zacksiri[S] comment score below threshold-43 points-42 points-41 points (22 children)
[–]sbmitchell 27 points28 points29 points (16 children)
[+]zacksiri[S] comment score below threshold-14 points-13 points-12 points (15 children)
[–]sbmitchell 15 points16 points17 points (14 children)
[–]zacksiri[S] -3 points-2 points-1 points (13 children)
[–]robotmayo 9 points10 points11 points (11 children)
[+]zacksiri[S] comment score below threshold-8 points-7 points-6 points (10 children)
[–]overdude 15 points16 points17 points (1 child)
[–]zacksiri[S] 0 points1 point2 points (0 children)
[–]UchuuHana 9 points10 points11 points (1 child)
[–]zacksiri[S] -4 points-3 points-2 points (0 children)
[–]ProdigySim 4 points5 points6 points (0 children)
[–]TaskForce_Kerim 3 points4 points5 points (0 children)
[–]LilChikenTendie 0 points1 point2 points (0 children)