Simple DELETE request using fetch API by making custom HTTP library

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 basic awareness of HTML, CSS and JavaScript.

Explanation: First of all 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 file at the bottom of the body tag. Now in library.js file, first of all 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 of all instantiate DeleteHTTP class. Then by http.delete prototype function send url to the to the library.js file. Further in this there are two promises to be resolved. First is for any response data and the second is for any error.

Filename: index.html



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Filename: library.js

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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 = await 'Resource Deleted...';
  
        // Return response data 
        return resData;
    }
}

chevron_right


Filename: app.js

filter_none

edit
close

play_arrow

link
brightness_4
code

// Instantiating new EasyHTTP class
const http = new DeleteHTTP;
  
// Update Post
  
// Resolving promise for response data
.then(data => console.log(data))
  
// Resolving promise for error
.catch(err => console.log(err));
  
console.log('response deleted...');

chevron_right


Output: Open index.html file in the browser then right click-> inspect element->console. The following output you will see for DELETE request:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.