Using Fetch

On several occasions I find myself using fetch to make calls to an API. I find it relatively straightforward to use. 

Here's a link to the mdn documentation on Fetch. Fetch API


The first thing that you need to do is determine if you are making a get or a post request. Get requests are typically used for getting information from the server. Get requests don't change any of the data on the server, they just retrieve it for you. For example, you want to get the weather for today for a custom weather app that you are working on. The data has already been added to the api and wouldn't need to be changed by you, so you use a get request to fetch it from the api and display it in your app. 


Here's what a fetch request looks like: 

fetch('your_api_url_goes_here') {
     .then(function(response) {
            return response.json();
     }}
     .then(function(data) {
            console.log(data);
     })


}

So, what does this code do? It sends a get request to the api. Once the request is finished, it takes the response it receives from the server and returns the response in json format. That's where the then  comes in to play. The next then takes the returned json and logs it to the console.

A post request, is typically done when you want to modify something on the server. In the case of our weather example above, the Meteorologist may want to update data for the api users. In order to do that they would send a post request. 

Here is what that might look like: 

fetch('your_api_url_goes_here', {
     method: 'POST', 
     body: JSON.stringify({your_data_to_be_updated: goes here}),
     headers: {
          'Content-Type': 'application/json,
     }
}). then(response => response.json())
.catch(error => console.log('Error: ', error))
.then(response => console.log(response))

Lets go over how this is working. We are passing in 2 arguments to the Fetch function. The first is the url that we want it to go to, to get the data. The second, is an object. The object consists of key/value pairs that are the instructions of the request. 

The first one is the method. Now in our get example, we didn't specify a method, as it is automatically asssumed. In this case, though, we need to specify post. The next thing is the body. That is where you pass your data in, and gets formatted into json to be sent to the server. The last part is the headers. These can be used to define the content type so the server knows how to hand the data, it can also be used to send authentication instructions, for when the server needs to verify the api call as valid and make any changes being requested. 


Once the data has been updated, it sends the updated data back, showing it was saved to the database. Awesome, now we can update our app with the data. 


This is the basics of how an api call using the Fetch function in JavaScript. There are other ways to do them, including using jquery which has a $.get and $.post and $.ajax functions to use with api's. There's also xmlhttprequest (XHR) which can also send data back and forth. The important part is to understand what GET and POST are supposed to do, the rest is easy.