通过制作自定义 HTTP 库使用 fetch API 进行简单的 DELETE 请求

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

先决条件：您应该对 HTML、CSS 和 JavaScript 有基本的了解。

说明：首先我们需要创建index.html文件并将index.html文件的以下代码粘贴到该文件中。 index.html文件包括

library.js和app.js文件位于 body 标记的底部。现在在library.js文件中，首先创建一个 ES6 类DeleteHTTP ，在该类中，有一个async fetch()函数从 api 中删除数据。等待有两个阶段。首先是fetch() ，然后是它的响应。无论我们收到什么响应，我们都会将它返回给app.js文件中的调用函数。
现在在app.js文件中，首先实例化DeleteHTTP类。然后通过http.delete原型函数将 URL 发送到library.js文件。此外，在这方面，有两个承诺需要解决。第一个用于任何响应数据，第二个用于任何错误。

index.html

  

    
    
    
    DELETE Request

  

    
        Simple DELETE request using fetch 
        API by making custom HTTP 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;
    }
}

文件名：app.js

应用程序.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));

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