Simple DELETE request using fetch API by making custom HTTP library Last Updated : 17 Feb, 2021 Comments Improve Suggest changes Like Article Like Report 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 class class 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 class const http = new DeleteHTTP; // Update Post http.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: Comment More infoAdvertise with us Next Article Simple DELETE request using fetch API by making custom HTTP library T thacker_shahid Follow Improve Article Tags : JavaScript Web Technologies HTML JavaScript-Questions Similar Reads How to make simple PUT request using fetch API by making custom HTTP library ? The fetch() method is used to send the requests to the server without refreshing the page. It is an alternative to the XMLHttpRequest object. It will be taking a fake API that will contain Array as an example and from that API we will show to PUT/Update  data by  fetch API  method by making custom H 2 min read Get request using AJAX by making Custom HTTP library The task is to show how the XMLHttpRequest can be used to get data from an API by making custom HTTP library. I will be taking a fake API that will contain an array of objects as an example and from that API, we will show to get data by XMLHttpRequest method by making a custom HTTP library. API link 3 min read DELETE request using XMLHttpRequest by making Custom HTTP library The task here is to show how the XMLHttpRequest can be used to DELETE data to an API by making a custom HTTP library. A placeholder API that contains an array of objects would be used as an example. The DELETE request is performed on this API. The URL of the API is https://jsonplaceholder.typicode.c 3 min read POST request using AJAX by making Custom HTTP library The task is to show how the XMLHttpRequest can be used to POST data to an API by making custom HTTP library. We will be taking a fake API which will contain Array of objects as an example and from that API we will show to POST data by XMLHttpRequest method by making a custom HTTP library. Used API: 4 min read GET and POST Requests using Fetch API with Custom HTTP Library 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 3 min read Like