Simple DELETE request using fetch API by making custom HTTP library

17 Feb, 2021
Why fetch() API method is used? The fetch() method is used to send the requests to the server without refreshing the page. It is an alternative to the XMLHttpRequest object. We will be taking a fake API which will contain Array as an example and from that API we will show to DELETE data by fetch API method by making custom HTTP library. The API used in this tutorial is: https://jsonplaceholder.typicode.com/users/2
Prerequisites: You should have a basic awareness of HTML, CSS, and JavaScript.
Explanation: First we need to create index.html file and paste the below code of index.html file into that. The index.html file includes
 library.js and app.js files at the bottom of the body tag. Now in library.js file, first create an ES6 class DeleteHTTP and within that class, there is async fetch() function which DELETES the data from the api. There are two stages of await. First for fetch() and then for its response. Whatever response we receive, we return it to the calling function in app.js file.Now in app.js file, first instantiate DeleteHTTP class. Then by http.delete prototype function send URL to the library.js file. Further, in this, there are two promises to be resolved. The first is for any response data and the second is for any error.
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>DELETE Request</title></head>  <body>    <h1>        Simple DELETE request using fetch         API by making custom HTTP library    </h1>      <!-- Including library.js and app.js -->    <script src="library.js"></script>    <script src="app.js"></script></body>  </html>
library.js
// ES6 classclass DeleteHTTP {      // Make an HTTP PUT Request    async delete(url) {          // Awaiting fetch which contains         // method, headers and content-type        const response = await fetch(url, {            method: 'DELETE',            headers: {                'Content-type': 'application/json'            }        });          // Awaiting for the resource to be deleted        const resData = 'resource deleted...';          // Return response data         return resData;    }}
Filename: app.js  
app.js
// Instantiating new EasyHTTP classconst http = new DeleteHTTP;  // Update Posthttp.delete('https://jsonplaceholder.typicode.com/users/2')  // Resolving promise for response data.then(data => console.log(data))  // Resolving promise for error.catch(err => console.log(err));
Output: Open index.html file in the browser then right click-> inspect element->console. The following output you will see for DELETE request:
SarveshHiwase
JavaScript-Questions
JavaScript
Web Technologies
Web technologies Questions
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
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?