Skip to content
Related Articles

Related Articles

Improve Article

How to use JavaScript Fetch API to Get Data ?

  • Difficulty Level : Easy
  • Last Updated : 08 Jan, 2021
Geek Week

The Fetch API provides a JavaScript interface that enables users to manipulate and access parts of the HTTP pipeline such as responses and requests. 

Fetch API has so many rich and exciting options like method, headers, body, referrer, mode, credentials, cache, redirect, integrity and few more. However, the most prominent ones we use are method, headers and body.

Method are used to create, read, update and delete data, and hence we have methods like GET, POST, PUT and DELETE.

As an example we would use the API: https://reqres.in/arpi/users which would give us random data about a person, our goal here is to see what is presented in this data. 

Syntax: 



fetch(URL, options)

Parameters: This method accepts two parameters as shown above and described below:

  1. URL: This is the endpoint of the resource from where you want to fetch data.
  2. Options: This is an optional parameter, it is an options object that can have the following values:
    • Method: This denotes the method type, it can be of any HTTP request type, like GET, POST, PUT, DELETE, etc.
    • Headers: In case we are passing data to the server, we need to additionally tell fetch that we are going to pass data in form of json/text, etc.  
    • Body: In this part, we actually pass the data as a JSON.

Example 1: GET Request demonstration.

Javascript




.then(res => res.json())
.then(data => console.log(data))

Output: This is what the API is returning to us, some random data about people.

Example 2: POST Request demonstration. We will, now post some random data by our self, with the help of POST method. 

Javascript




  // Defining method type as POST
  method: 'POST'
  // Fetch knows, what type of data are we dealing with
  headers: {
    'Content-Type': 'application/json' 
  },
  // Data needs to be parsed into JSON
  body: JSON.stringify({ 
    name: 'Geeks For Geeks',
    website: 'https://www.geeksforgeeks.org/',
  })
}).then(res => {
  return res.json()
}).then(data => console.log(data));

Output: Here, we see that we have successfully made a POST request using fetch API. 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :