Vanilla JavaScript 中 PUT 和 DELETE 请求的区别

PUT和DELETE是两种不同类型的HTTP请求方法。 HTTP协议支持多种方法从服务器传输数据或在服务器上进行任何操作。 HTTP协议支持以下方法，例如 GET、POST、PUT、DELETE、PATCH、COPY、HEAD、OPTIONS 等。在深入探讨 PUT 和 DELETE 请求方法的主要区别之前，让我们先了解一下HTTP方法。

什么是 PUT 请求方法？
当客户端在请求 URL 下发送替换文档或将新文档上传到 Web 服务器时使用它。

什么是 DELETE 请求方法？
当客户端尝试从 Web 服务器中删除由请求 URL 标识的文档时使用它。

示例：让我们看一个 PUT 请求方法的示例。

Javascript

function easyHTTP() {
 
    // Initialising new XMLHttpRequest method.
    this.http = new XMLHttpRequest();
}
 
// Make an HTTP PUT Request
easyHTTP.prototype.put = function (url, data, callback) {
 
    // Open an object (POST, PATH,
    // ASYNC-TRUE/FALSE)
    this.http.open('PUT', url, true);
 
    // Set content-type
    this.http.setRequestHeader(
        'Content-type', 'application/json');
 
    // Assigning this to self to have scope
    // of this into the function onload()
    let self = this;
 
    // When the response is ready
    this.http.onload = function () {
 
        // Callback function (Error, response text)
        callback(null, self.http.responseText);
    }
 
    // Since the data is an object so
    // we need to stringify it
    this.http.send(JSON.stringify(data));
}
 
// Instantiating easyHTTP
const http = new easyHTTP;
 
// Data that we need to update
const data = {
    title: ‘Custom Putt’,
    body: ‘This is a custom put’
};
 
// Put prototype method(url,data,response text)
http.put(
    'https://jsonplaceholder.typicode.com/posts/5',
    data, function (err, post) {
 
        if (err) {
            console.log(err);
        }
        else {
            console.log(post);
        }
 
    });

示例：以下代码演示了 DELETE 请求方法。

Javascript

function easyHTTP() {
 
    // Initialising new XMLHttpRequest method.
    this.http = new XMLHttpRequest();
}
 
// Make an HTTP Delete Request
easyHTTP.prototype.delete = function (url, callback) {
 
    // Open an object (GET/POST, PATH,
    // ASYNC-TRUE/FALSE)
    this.http.open('DELETE', url, true);
 
    // Assigning this to self to have 
    // scope of this into the function
    let self = this;
 
    // When the response is ready
    this.http.onload = function () {
 
        // Checking status
        if (self.http.status === 200) {
 
            // Callback function(Error, response text)
            callback(null, 'Post Deleted');
        } else {
 
            // Callback function (Error message)
            callback('Error: ' + self.http.status);
        }
    }
 
    // Send the request
    this.http.send();
}
 
// Instantiating easyHTTP
const http = new easyHTTP;
 
// Delete prototype method(URL,
// callback(error,response text))
http.delete(
    'https://jsonplaceholder.typicode.com/posts/1',
    function (err, response) {
        if (err) {
            console.log(err);
        } else {
            console.log(response);
        }
    });

PUT 和 DELETE 的区别：

PUT Request	DELETE Request
It is used to Create or Modify a resource.	It is used to delete a resource identified by a URL.
It is idempotent.	It is also idempotent.
On successful resource creation, HTTP success code 201(Created).	On successful deletion of record, we can see 200 (OK) or 204 (No Content).