Yes, the first thing that came to my mind as i heard the word fetch in JavaScrip. i was like "what does Mean girls, have to todo with coding!"
but its actually a word that has a different meaning of what the movie implies, let check this fetch out and what it does in JavaScript.
fetch() in its simplest definition, is a function in JavaScript for interacting with the database, especially with APIs (Application Programming Interface).
there are four types of requests that Fetch provides us with:
1)GET requests — used for retrieving or “fetching” data.
2)POST requests — used for uploading or adding data.
3)PATCH / PUT requests — used for editing data that is already in the database.
4)DELETE requests — used for deleting a piece of data.
In this blog we are going to go over two of this fetches a GET and POST using my JS project.
lets start with the first fetch.
this is how a basic fetch function looks like.
if we enter the above code in the console will return a promise, every successful Fetch request will always return a promise and along with this promise comes a response using the .then method we then took the response and converted it to JSON or JavaScript Object Notation is the format for how we transmit data through web applications. see code below
As you see, the data was fetched and we now have the data we wanted. from there we can choose what todo with it. what I did is iterate over and chose the first Shop and this first shop has Items. as you can see to fetch our database we did the same thing to fetch the items which in this case are Sushi rolls.
but what about if we want to now create items and add to out backend ? well first we need to create our form then grab the values of this form to send to the backend.
quick thought, On the form don't forget to call the event.preventDefault()method to prevent the default submit behaviour of the browser.
Okey lets move on, Before sending the HTTP POST request, by using the Fetch API we need to prepare the new object based on what has been entered in the form.
The values which have been entered in the input elements are stored in the variables titleInput and imageInput and are used to create a new object.
The HTTP POST request is sent by calling the fetch function. Two parameters are passed into this function call:
1) the URL as string
2) a configuration object
second argument. In this object, we have three key-value pairs. The first is the request we’re making to the database or backend. In this case, it’s a POST request. The next pair value, the headers contains information about the data being sent. Content-type states what format the data will be sent in. Accept simply means what format we’ll accept the data in. The last key-value pair represents the information about the attributes needed to create an item in stringified form. Then it gets the response, converts it into Javascript, and console logs the data.
In Summary all of this information can be confusing at first. I certainly had difficulty wrapping my head around it at first but a little of practice you will be able to understand it. Thank you! Happy coding!
resources: MDN Using fetch
Top comments (0)