如何通过自定义 HTTP 库使用 fetch API 发出简单的 PUT 请求？

fetch()方法用于在不刷新页面的情况下将请求发送到服务器。它是XMLHttpRequest对象的替代品。它将以一个包含 Array 的虚假 API 为例，从该 API 中，我们将通过创建自定义 HTTP 库来通过获取 API 方法显示PUT/Update数据。本教程使用的API为：https://jsonplaceholder.typicode.com/users/2

先决条件：您应该了解 HTML CSS 和 JavaScript 的基础知识。

说明：所有我们需要创建index.html文件，并粘贴以下index.html文件的代码到第一位。这个index.html文件在 body 标签的底部包含library.js和app.js文件。现在在library.js文件中，首先创建一个ES6 类 EasyHTTP ，在该类中，有一个异步 fetch()函数将数据放入 api url。有两个阶段的等待。首先是fetch() ，然后是它的响应。无论我们收到什么响应，我们都会将它返回给app.js文件中的调用函数。

现在在app.js文件中首先实例化EasyHTTP类。然后通过放置原型函数，将 url 发送到library.js文件。此外，还有两个承诺需要解决。第一个用于任何响应数据，第二个用于任何错误。

文件名：index.html



  

    
    
    
    PUT Request

  

    
        Simple PUT request using fetch API 
        by making custom HTTP library

文件名：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;
  }
}

文件名：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(
'https://jsonplaceholder.typicode.com/users/2',
     data)
  
// Resolving promise for response data
.then(data => console.log(data))
  
// Resolving promise for error
.catch(err => console.log(err));

输出：在浏览器中打开index.html文件，然后右键单击-> 检查元素->控制台。
您将看到PUT请求的以下输出。

Simple PUT request using fetch API by making custom HTTP library