Fetching JS

This is the different types of request in javascript webpage. How to and what you need to know.

I will show most of the common fetches to run a complete CRUD for Javascript with a different Backend for your database.

The first one is the basic fetch to grab any information stored inside the database you want to use.

Let’s break this down 1 line of code at the time.

This line of code is telling the javascript where to pull the information you want from. It will return you promise that will resolve to a response where you can pull an actual data from. now you have a choice what to do with that data, if you want to GET(view or show), POST(add), Patch(update or edit), and Delete(well this one destroys the data bye bye!👋)

This is the promise(.then()) and the response that we need to get the data inside the DOM or database where you store your input of data.

This one returns you current data and it’s telling what action must be done for the data that just got pulled. In this case it’s telling the data to show it inside the console for us to check if that is the data we want to manipulate or show inside our webpage.

Now will move on to the next method which is POST

It is the same concept from above fetch will get the response and look inside the interface. method: “asking what kind of action you want to do with the data you got from fetch. Post will allow you to add data inside the DOM or inside the specific group of data you fetch. The Headers is is telling what type of data inside the DOM are you looking for and translate the Data from the DOM to Javascript. The Body is the one that you want to add to the database you are fetching. JSON.stringify will let you translate javascript to json and be added to the group of data you just fetch. As explained above you can add any action you desire instead of console.log(data).

Will now meet the other method PATCH

As you already know most of the codes above the only difference is the patch will update or edit the current data you specifically fetch. In the most common case you look for the id of the data you want to update. Give the information you need inside the body e.g. newId, newName etc.. This should change the old data value a new updated version you just gave it. Again right after all of this is the action you want to do with the method and data.

Now, Now for the HARDEST FETCH OF ALL. DELETE!!!

Well it’s just how you see it you find the data you want to delete with its id preferably to be specifically pointed to that data. The method is delete and it destroys the data from existing inside the DOM.

Thats all now practice and Have Fun Coding!!!