What exactly is fetch() and how does it work? The fetch function’s job is to retrieve data. Inside the parentheses, you must pass an argument that takes a string representing the URL to the data source. Ok .then I’ll tell the messenger called promise to return my data into JavaScript Object Notation (JSON) form using the .json() helper method, so javaScript knows how to read it and turn it into objects. You do just that and promise gives you something to keep you occupied while he gets information. When he comes back, he .then hands over some objects to the guy sitting next to you. This guy decided to put it in a folder. The guy sitting next to you is promise’s younger brother promise, Huh, What parent names their 2 boys promise?! You know what, let me just go ahead and grab the objects promise NUMBER 2 left in the folder and iterate through it because it’s mine now.
I got the data needed to do some DOM manipulation. All jokes aside this is an example of how the fetch function works.
Ok, all of this fetch stuff seems a bit much for a website, wouldn’t you need to reload the page after if you try saving or retrieving stuff from the data? No, that would slow the website down because of constant reloading, we don’t want that, we have something that will connect to a server, or API through JavaScript. This can be done through AJAX (Asynchronous JavaScript And XML). What is AJAX you ask? Well AJ represents code being executed asynchronously (completing more tasks at a time). XML gathers data and shares some on the internet through the browser. AJAX why such a weird name for something that makes processing data so fast. Well AJAX has been around for ages and the X in AJAX is for the standard API XMLHttpRequest. The XMLHttpRequest was a bit confusing in code, so fetch() was created to simplify the process. To recap, the fetch function provides a JavaScript Interface to get and manipulate parts of the HTTP pipeline for requests and responses using promises.