How to use JavaScript Fetch API to Get Data ? - GeeksforGeeks

08 Jan, 2021

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:

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.



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.


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.
Example 2: POST Request demonstration. We will, now post some random data by our self, with the help of 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. 

JavaScript-Misc


Picked


Technical Scripter 2020


JavaScript


Technical Scripter


Web Technologies

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?