Want to fetch? Use fetch() 😉
Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page. — MDN
Hello there! So often than I care to admit, in the front-end scene we are either fetching(making a GET request) from a web service or creating a resource on a web service(POST, PATCH, etc). Sounds familiar? I bet it does.
Good Ol’ XMLHttpRequest Object — AJAX.
With the era of minimal page load, most of our “fetching” on the client-side has been done asynchronously and this was made popular with AJAX
Psst: AJAX stands for Asynchronous JavaScript And XML
So using AJAX and you want to let’s say fetch a particular user’s info(say me: DominusKelvin) from GitHub’s REST API, you would do something like this on the client:
Enter Fetch() — Appropriately named right? 😉
So no doubt, Ajax is cool, was really amazing when I first learned about it, but even cooler is fetch():
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used
XMLHttpRequest, but the new API provides a more powerful and flexible feature set. — MDN
What fetch brings to the table(Excerpt from MDN)
- Fetch provides a generic definition of
RequestandResponseobjects (and other things involved with network requests). This will allow them to be used wherever they are needed in the future, whether it’s for service workers, Cache API and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your own responses programmatically. - It also provides a definition for related concepts such as CORS and the HTTP origin header semantics, supplanting their separate definitions elsewhere.
What that means is that fetch comes equipped for “fetching” purposes 😉. It extensively makes use of Promises from ES6 and the syntax is much cleaner and DRY in comparison to AJAX
Back to fetching me from Github 😁
So we saw how to make a GET request using good ol’ AJAX right? Let’s see how fetch could do the same operation, shall we? Come forth fetch()!
Or
😎 You could see how leaner and cleaner it is. So what’s going on here you might ask? So the fetch object accepts one mandatory argument which is the URL to the resources you want it to “fetch”, it then returns a promise containing the response(if everything goes well). The response returned in this promise can’t be used just quite yet so you have to tell fetch() to give you the response in JSON style(could also want it in other formats. But ain’t JSON popular?)with this bit response.json().
response.json() also returns a promise which contains the response to your request in JSON. Finally we are handling errors with the catch block/chain
Psst: fetch is quite extensively documented and you get to see the nitty gritty when you look it over. Would leave some vitamins to that effect.
Conclusion
So that’s it, you now have another mechanism you could use in your fetching task which is quite a lot on the client(looking at SPAs)
Developer Vitamins
Happy Deploying 🚀 🚀 🚀
