通过制作自定义 HTTP 库使用 XMLHttpRequest 删除请求

简介

XMLHttpRequest 是一种具有广泛使用和许多功能的 Web API，它允许浏览器与服务器交互，获取内容并更新页面。本文将介绍如何使用 XMLHttpRequest 轻松地发送 HTTP DELETE 请求并处理响应。我们将创建自己的 HTTP 库，以便可以轻松地进行 DELETE 请求，而不必担心大量的样板代码。

实现

我们将使用 ES6 中的 Promise API，以更优雅的方式处理异步请求。首先，我们需要创建一个顶级的 HTTP 类，它定义基本的请求方法。然后，我们将扩展HTTP类添加一个 DELETE 方法，该方法使用 XMLHttpRequest 发出 DELETE 请求。

class HTTP {
  // HTTP 构造函数
  constructor() {}

  // HTTP GET 请求方法
  get(url) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url);

      xhr.onload = () => {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(xhr.responseText);
        }
      };

      xhr.onerror = () => {
        reject("请求失败");
      };

      xhr.send();
    });
  }

  // 让我们继续添加 DELETE 方法!
  delete(url) {
    // 留待下一步实现
  }
}

下一步，我们将添加 DELETE 方法的实现。我们将使用相同的模式：创建 XMLHttpRequest 实例、设置 URL、执行操作、如果成功，则返回 Promise，否则返回错误。

delete(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("DELETE", url);

    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve("删除成功");
      } else {
        reject(xhr.responseText);
      }
    };

    xhr.onerror = () => {
      reject("请求失败");
    };

    xhr.send();
  });
}

我们现在可以轻松地使用 HTTP 库发出删除请求！

const http = new HTTP();

// 删除 post
http.delete("https://jsonplaceholder.typicode.com/posts/1")
  .then( message => console.log(message))
  .catch( error => console.error(error));

以上是使用自定义 HTTP 库发出删除请求的完整代码。

结论

使用 XMLHttpRequest 发送 HTTP DELETE 请求很简单。通过创建一个自定义 HTTP 类，我们可以轻松地在应用中使用同样的模式来发送 GET 和 DELETE 请求，并完美地处理响应。

希望这篇文章能为您提供有关如何通过制作自定义 HTTP 库使用 XMLHttpRequest 删除请求的深入了解。如果您有任何问题，请在评论中联系我。