Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make simple PUT request using fetch API by making custom HTTP library ?

  • Last Updated : 18 Jul, 2020

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 HTTP library. The API used in this tutorial is: https://jsonplaceholder.typicode.com/users/2

Prerequisite: You should be aware of basics of HTML CSS and JavaScript.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Explanation: First of all we need to create index.html file and paste the below code of index.html file into that. This 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 EasyHTTP and within that class there is async fetch() function that puts the data to the api url. 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 EasyHTTP class. Then by put 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




<!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>PUT Request</title>
</head>
  
<body>
    <h1>
        Simple PUT 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>

Filename: library.html




// ES6 class
class EasyHTTP {
  
   // Make an HTTP PUT Request
   async put(url, data) {
  
    // Awaiting fetch which contains method,
    // headers and content-type and body
    const response = await fetch(url, {
      method: 'PUT',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify(data)
    });
      
    // Awaiting response.json()
    const resData = await response.json();
  
    // Return response data 
    return resData;
  }
}

Filename: app.html




// Instantiating new EasyHTTP class
const http = new EasyHTTP;
// User Data
const data = {
    name: 'sunny yadav',
    username: 'sunnyyadav',
    email: 'sunny@gmail.com'
  }
  
// Update Post
http.put(
     data)
  
// 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 PUT request.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!