GET and POST Requests using Fetch API with Custom HTTP Library
Last Updated :
25 Jun, 2024
This tutorial covers the basics of using the Fetch API to perform GET and POST requests within a custom HTTP library. Wiasynchronous operations and handling JSON data, you can effectively fetch data from remote APIs and submit data to servers. This approach gives you greater control and flexibility in managing HTTP requests and responses in your web applications.
API Used
Prerequisite
GET Request using Fetch API
First, create an 'index.html' file that includes 'library.js' and 'app.js' at the bottom of the 'body' tag. In 'library.js', define an ES6 class 'EasyHTTP' with an async 'get()' method to fetch data from a specified API URL using the Fetch API. This method handles asynchronous operations with async/await, awaiting both the fetch() method and its response.
Example: To demonstrate creating a simple GET and POST request using Fetch API method by making custom HTTP library
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Get Request Example</title>
</head>
<body>
<h1>Simple GET request using Fetch API method</h1>
<!-- Including library.js file and app.js file -->
<script src="library.js"></script>
<script src="app.js"></script>
</body>
</html>
//library.js
class EasyHTTP {
// Make an HTTP GET Request
async get(url) {
// Awaiting for fetch response
const response = await fetch(url);
// Awaiting for response.json()
const resData = await response.json();
// Returning result data
return resData;
}
}
// app.js
// Instantiating EasyHTTP
const http = new EasyHTTP;
// GET request example
http.get('https://jsonplaceholder.typicode.com/users')
// Resolving promise for response data
.then(data => console.log(data))
// Resolving promise for error
.catch(err => console.log(err));
Output:
- For GET request: Run the 'index.html' file in the browser, then inspect the console to view the response data fetched from the API.
GET Request OuputPOST Request using Fetch API
Similarly, for the POST request, continue with the 'index.html', 'library.js', and 'app.js' setup. In 'library.js', extend the 'EasyHTTP' class with an async 'post()' method. This method performs a POST request with specified data to the API URL using Fetch API. It also handles async/await operations to ensure proper response handling.
Example: To demonstrate creating a simple POST request using Fetch API method by making custom HTTP library
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>POST Request Example</title>
</head>
<body>
<h1>Simple POST request using Fetch API method</h1>
<!-- Including library.js file and app.js file -->
<script src="library.js"></script>
<script src="app.js"></script>
</body>
</html>
//library.js
class EasyHTTP {
// Make an HTTP POST Request
async post(url, data) {
// Awaiting for fetch response and
// defining method, headers and body
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
});
// Awaiting response.json()
const resData = await response.json();
// Returning result data
return resData;
}
}
app.js
// Instantiating EasyHTTP
const http = new EasyHTTP;
// Data for post request
const data = {
name: 'John Doe',
username: 'johndoe',
email: '[email protected]'
};
// POST request example
http.post('https://jsonplaceholder.typicode.com/users', data)
// Resolving promise for response data
.then(data => console.log(data))
// Resolving promise for error
.catch(err => console.log(err));
Output:
- For POST request: Run the 'index.html' file and check the console to view the response data returned after posting data to the API.
POST request Output