Stop trying to make "Fetch" happen! I am sure many, many JavaScript developers have heard this line over and over again. But we did make it happen, and it works so well.
But what is Fetch? It is not the hottest Gen-Z or Millenial term coined by Gretchen, played by the wonderful Lacey Chabet. Nor is it a great game to play with your pets! It is a terrific interface for making AJAX requests in JavaScript. Oh no, I may have lost you. What is AJAX, you ask? AJAX is short for Asynchronous JavaScript and XML. Let me explain asynchronous JS before diving deeper into Fetch().
Asynchronous JS or AJAX is excellent because it allows us, developers, to update a webpage without reloading the whole page. We can request and receive data too once a page is loaded. This is useful if you have many items on your page and you did not want to reload the whole page every time a user interacts with a piece of it that needs to send/receive data. Doesn't this sound awesome already?
So how does AJAX work? Technical terms: JavaScript uses a built-in object called an XMLHttpRequest (XHR) to make HTTP requests to the server and receive the data back. It is like Gretchen passed a note to Karen in class to share out that there was a party later without the whole classroom realizing it. And in turn, Karen screamed out with the information, thus updating the classroom. You make AJAX calls to refresh content in some ways, usually to update the webpage elements.
(image from tutorialrepublic.com)
Since I super-simplified AJAX calls, here are some excellent links for more information about Asynchronous JS:
- https://www.tutorialrepublic.com/javascript-tutorial/javascript-ajax.php
- https://www.tutorialspoint.com/ajax/what_is_ajax.html
- https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
Why am I making Fetch happen? Fetch is one way of making AJAX calls on your webpage. Fetch is an API that allows you to request for a resource (AJAX!) asynchronously. If you use the fetch() method, it will return a promise that resolves into a Response object.
Promise = an object which represents a future result.
The Response object holds the information we want or need to update the content on our webpage. Usually, we will still have to format it in some ways. However, since we used a Fetch and its usage of AJAX calls, the user can remain on the page while we go and get info and bring it back to them or even POST, PATCH, and DELETE without changing the screen for the users. We can help with limiting load times and clicks on the user's end.
Using the Fetch API, has many benefits including the usage of .then(), .catch(), and .finally(). These additional methods allow us to work with the fetched response object more before moving on to another function or script.
.then() allows us to either look closer at the data, modify it, pass it as a param, and more.
.catch() is get for error handling (see the first link below about Try...Catch for other error handling help).
And .finally() allows continuation to another function or step if we were waiting for any additional user input that we did not receive.
You'll see here in this Fetch; I used all three to grab data, call a function, catch any errors, and move on (or reload).
This fetch is also updating some data. Again, this allows for updates without doing a full page reload to continue working our site/page without additional navigation or clicking. I don't have to tell you how much better of a user experience this is.
Setting up a fetch method is simple but can be daunting. Note, there is only one that is required: the URL. Where do you want the fetch to go? After that selection, using fetch methods will be a breeze. After selecting the URL, I highly suggest looking at the response code using the {debugger} call, the web console debugger, or even console.log to determine what you received and can manipulate.
Fetch Links:
- https://www.sitepoint.com/introduction-to-the-fetch-api
- https://www.javascripttutorial.net/javascript-fetch-api/
Once you see what type of data you can retrieve, you can start using it. Fetch is by default a GET request, but as I mentioned earlier, you can use Fetch to make other calls as in my example I used it to make a PATCH request. You can "send" this data by using the OPTIONS params in fetch. See the above links for more information
Top comments (0)