Using Fetch

Fetch preforms an Ajax request and is used widely by modern browsers to call API. Ajax stands for Asynchronous JavaScript And XML. It is a technique for accessing data from server asynchronously. The Ajax Technique removes the need to reload the web page each time the user needs to make a change. In Ajax we deliver an initial html and CSS page that the browser can render quickly then we use JavaScript to add to the DOM.

Fetch has different methods such as GET, PATCH, POST and DELETE. To use a simple GET we can use

to download the contents of the URL. Fetch returns a promise object. The next step is to use a .then() method that takes a call back function that will return a promise.

Instead of response.json() we can also use

we use another .then() that will receive the returned object that we capture in a parameter and pass it into another callback function where we write the code to manipulate the DOM.

If we want to edit the data we have we will then use a patch method. In the example we will act as if we’re using json data as it is more commonly used.

NewData is the data you want to edit and how you want to edit it. For example if your data had likes and you want to increment them by 1 the body will look like this

Post requests is for adding new data instead of editing existing data.

NewData here is the new object you want to add to the data.

Delete requests is for removing Data and does not have a body.

Related posts:

Many of us have old Gmail accounts that we no longer use. Maybe you created one when you first got started with email. But now you have a different account that you use for work or personal email…

Apple apparently loved a swipe keyboard for Apple Watch. Received a demo from FlickType App creator Kosta Eleftheriou, and then released their own with the Apple Watch 7. You have a lovely little…

For the past 5 years I worked with an assistant in my organization who came to our office and assist me with the administrative side of our organization, as a secretary for two branches many loads of…