All You Need to Know About the “Fetch API” in JavaScript

Fetch API in JavaScript — A tutorial

Published in

JavaScript in Plain English

6 min readJul 19, 2021

Hey there, hope you are having a good day, and even if you are not, let’s make it good by learning about the “Fetch API”. By learning about the Fetch API, you will be able to fetch the data you want, in your own style.

In this post, we will learn the following:

What is the Fetch API? How to use it?
Different methods in it → get, post, put, delete

In the continuation post, I’ve discussed how to handle the unsuccessful calls of fetch(). You can jump to that if you wish.

Prerequisites: Arrow functions and Promises.
Long post ahead, hold tight! But I’ve included images for everything to make it not so boring.

What is the Fetch API?

It is built into browsers to make asynchronous requests to different network resources.

Syntax: fetch(“URL”) → default method will be GET, to receive data
We can add options for other purposes, we will discuss that later.

Some noteworthy points :

Fetch always returns, what we call a “Promise”
Fetch always succeeds or gets a response unless there’s some sort of network error such as DNS lookup failure (we will be making use of this point in the next post)

And Of course, the “I don’t know who uses it anymore” browser a.k.a. IE (Internet Explorer) doesn’t support the fetch calls.

For pinging purposes, we will be using an open-source API https://reqres.in/api/users. Let us store it in a variable url for further use.

let url = "https://reqres.in/api/users"

So coming to fetch, it takes two arguments, the “URL” and an object, “options”. Only the ‘URL’ is mandatory, and the method is set to GET by default if not provided.

fetch( url , {options} )   
// url must be a string and an object with required options

We get a Promise back showing ‘state’ as “fulfilled” and we have a ‘Response’ as a result. Let’s get the response and console log it to see what we have in there. We use .then() because a promise is returned by fetch().

fetch(url)
.then( response => console.log(response) )

So, we have a body that is a “Readable Stream” and to be able to read it, we need to return a JSON format of the response. We use the .json() method for that purpose.

fetch(url)
.then(response => response.json())

You can see that we have an array of objects of our required data.
To extract the data from this response, we can use a .then() method again to get the data and console log it. This is possible because .then() also returns a promise. So, there can be a chain of methods.

fetch(url)
.then(response => response.json())
.then(data => console.log(data))

You can see that we have only the required data in form of an array of objects.

Different methods in it :

Now, coming to the 2nd argument of fetch() which includes the different methods in it → the options object

Fetch options so far:

method → HTTP-method ( GET, POST, PUT, DELETE )
headers → an object with request headers (not any header is allowed)
body → the data to send (request body) as string , FormData , BufferSource , Blob or UrlSearchParams object

For the methods GET and DELETE, we do not need the headers or the body. But to get specific user data or to delete a user, we need the id of the user which is generally an integer representing a specific user.

GET: As the default method is GET, we don’t even need to include the options object. All the above calls were by default with GET as the method.

To Get specific user data → add id at the end of url:

fetch(url + "/2") // 2 is the id of that user
.then(res=>res.json())

For delete, update, create, we can see the status to confirm or just return the response.json() to check whether the call was successful. A success message is received in the form of “ok : true & status code: 2xx”, I’ve included images for all these cases, so bear with me.

DELETE: Delete the user with id ‘2' :

fetch("https://reqres.in/api/users/2", { // full url can be written
method : 'DELETE',
}) // headers and body are not required

POST: To create a new user, we use the POST method, and to update user data, we use the PUT method. For both of these methods, we have to provide headers and body to let the browser know what kind of data we are sending (mentioned in headers) and what data we are sending (mentioned in body)

Creating a new user → a new id is set to the created user :

fetch(url, {
    method : 'POST',
    headers: { 
      'Content-type': 'application/json; charset=UTF-8'  
      },
   // Indicates the content type as "json"(you can omit the charset)
   
    body: JSON.stringify( { 
      first_name : "Adam",
    } )
   // we must provide body data in JSON string format
   // hence we convert it with JSON.stringify()})
.then(res=>res.json())

PUT: Updating user data → we must add the id of the user, whose data we are updating, at the end of url :

fetch("https://reqres.in/api/users/3", {
    method : 'PUT',
    headers: {
      'Content-type': 'application/json; charset=UTF-8'  
    },
    body:JSON.stringify({
        first_name : "Kevin",
    })
})
.then(res=>res.json())

Finally, we are done with the different methods in it. But this is not the end. We have more. Let’s stop here for today and continue in the next post.
Wow, despite the long post, you made it to the end. Pat your back, you deserve some praise.

In the next post, I’ll discuss how to catch the errors OR the unsuccessful requests which we cannot catch and have to be handled in a different way.
So give a follow and stay tuned for the next post. I hope you learned something from the article.

Please consider showing your appreciation by providing feedback and suggestions in the comment section.

If you are pleased too much, you can always buy me a coffee 😉