How to use JavaScript Fetch API to Get Data ?

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 a few more. However, the most prominent ones we use are method, headers, and body.

The method is 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:

• URL: This is the endpoint of the resource from where you want to fetch data.
• 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

fetch("https://reqres.in/api/users")
.then(res => res.json())
.then(data => console.log(data))

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

{page: 1, per_page: 6, total: 12, total_pages: 2, data: Array(6), …}
data
:(6) [{…}, {…}, {…}, {…}, {…}, {…}]
page
:1
per_page
:6
support
:{url: 
'https://reqres.in/#support-heading', text: 'To keep ReqRes free, 
    contributions towards server costs are appreciated!'}
total
:12
total_pages
:2
[[Prototype]]
:Object

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

Javascript

fetch("https://reqres.in/api/users", {
  // 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. 

{name: 
'Geeks For Geeks', website: 'https://www.geeksforgeeks.org/', 
id: '96', 
createdAt: '2023-01-11T06:53:03.680Z'}