API calls using fetch in javascript

#fetch #api #frontend

Nowadays almost all web applications are API based which means backend for the application will be written in API(Application programming interface). So that backend application can be used across all platforms such as browsers, mobile, and desktop.The API integration is the most important thing to learn in modern web application development.

Today we will learn how to make API calls by using fetch in javascript

Before going to details , Let's have some idea of the API. Basically API has four methods(commonly used) those are GET, POST, PUT and DELETE. With these four methods get, create, update or delete functionality can be implemented.

GET means to get some data from the server or any other source
POST means Posting some data to the server to create some record
PUT means posting some data to update the existing record
DELETE means send a delete request to the server to delete some data in server

let's jump into our main topic

fetch is basically a module that is a builtin feature of javascript used to call the API endpoints of the server and get the response.

Basic syntax

fetch('server url')
    .then(res => 
        console.log(res)
    );

GET Request Fetch

I found an online tool to make fake API calls and check how "fetch" works.
The tool is https://jsonplaceholder.typicode.com.Just we have to pass the URL in fetch API as shown in the below URL.

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))//Make response into json format

Output
 {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
}

POST Request Fetch

We can make a POST request to the server using the fetch using the following syntax.

    fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1
    }),
    headers: {
        "Content-type": "application/json; charset=UTF-8"
    }
    })
    .then(response => response.json())
    .then(json => console.log(json))

Output/Response 

    {
        id: 101,
        title: 'foo',
        body: 'bar',
        userId: 1
    }

In the above request,we can send any data object in the stringified format in the body of the request. In the backend, this data can be accessed for processing or saving into the database. Here as we send the data in JSON format so we are making header content-type as application/json.There are other content-type such application/xml,text/html or multipart/form-data.

PUT Request Fetch

To update some data to server/resource, We can use this method.

    fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PUT',
    body: JSON.stringify({
        id: 1,
        title: 'foo',
        body: 'bar',
        userId: 1
    }),
    headers: {
        "Content-type": "application/json; charset=UTF-8"
    }
    })
    .then(response => response.json())
    .then(json => console.log(json))

    Output 
    {
        id: 1,
        title: 'foo',
        body: 'bar',
        userId: 1
    }

DELETE Request Fetch

To delete some data in the server/resource, we can use this method.

    fetch('https://jsonplaceholder.typicode.com/posts/1', {
        method: 'DELETE'
    })

Important: the resource will not be really deleted on the server but it will be faked as if.

To understand the API calls, first, you have to understand,How API can be written in backend and how it executed. We will cover this topic in next blog.