Working with Fetch API in JavaScript
We may sometimes need to communicate with other web servers. And at this point, one of the methods that comes into play is the Fetch API. At its most basic, the Fetch API is a modern interface that allows us to make HTTP requests from web browsers to servers.
Fetch API is located under the window object and uses the promise structure that comes with ES6. If you have worked with XMLHttpRequest (XHR) or ajax() objects, Fetch API performs the operations of these objects in a simpler and async(promise) way.
GET Method in Fetch API
Only one parameter is required to use the fetch() method, which is the endpoint of the resource we want to fetch.
fetch(url)Since it uses the promise method after we enter the address we requested in the fetch() method, it does the capture process asynchronously with the then() and catch() methods.
*If an error does not occur, the incoming data comes to us as response data in then(). Then the response is taken as a parameter and the code is executed.
* If an error occurs, that is, the API we call using fetch() does not work, or if other errors occur, the error parameter is taken as a parameter and the code in catch() is executed.
Now let’s make a request to an API using our fetch() method:
Above, we converted the response into a json object and used it as data(response) in the next then() function. Then we printed this data to the console:
Now, let’s make changes to our endpoint in the previous example and request the title of our 3rd object under albums:
Console output:
We can apply the changes we want to make in our endpoint to the response in the then and make different requests. For example, in the example above, we made a request for albums/3 and gave the response as a parameter to the next then (data). Then we made a request to the title of this data.
In the examples above, we obtained the json object by using the json() function, since we were pulling data in json format from the APIs. If our response is text, we can use the text() function to get the text result (json() and text() functions are inherited from the response object.)
POST Method in Fetch API
The default method for Fetch is the GET method. That’s why we need to give a second parameter to our fetch method when executing the POST. This parameter contains some information about the POST method. For example, since our method is POST, we must specify it:
After specifying our method in the example above, we determined the title and type of the data we sent in the request header and added the json data we want to post to the request body.
As a result, we have performed our http operations with fetch() without using complex methods or using any JavaScript library.
I hope it was an enjoyable read, see you in another article…
Resources:
