【JavaScript】使用 XMLHttpRequest 和 Fetch API

在前端开发中， 与服务器进行数据交互是不可避免的需求，而 JavaScript 提供了多种方式来实现 HTTP 请求。本篇博客将介绍两种常见的 HTTP 请求方式：XMLHttpRequest 和 Fetch API，以便更好地理解它们的使用场景和特点。

1. XMLHttpRequest

发送GET请求

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Response:", xhr.responseText);
  }
};
xhr.send();

在上述例子中，通过创建 XMLHttpRequest 对象，使用 open 方法配置请求方法、URL 和是否异步。然后通过 onreadystatechange 监听状态变化，当状态为 4（表示完成）且状态码为 200 时，表示请求成功，可以获取响应数据。

发送POST请求

let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/post", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Response:", xhr.responseText);
  }
};
let postData = { key: "value" };
xhr.send(JSON.stringify(postData));

在上述例子中，通过将请求方法改为 POST，并使用 setRequestHeader 设置请求头，然后通过 send 方法发送 JSON 格式的数据。

2. Fetch API

发送GET请求

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    console.log("Data:", data);
  })
  .catch(error => {
    console.error("Fetch error:", error);
  });

在上述例子中，使用 fetch 函数发起 GET 请求，通过 .then() 方法处理响应，并使用 .catch() 方法捕获错误。

发送POST请求

fetch("https://api.example.com/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ key: "value" })
})
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    console.log("Data:", data);
  })
  .catch(error => {
    console.error("Fetch error:", error);
  });

在上述例子中，使用 fetch 函数发起 POST 请求，通过配置 method、headers 和 body选项来发送 JSON 格式的数据。

3. 对比与总结

XMLHttpRequest

• 老式API：XMLHttpRequest 是较老的 API，虽然在现代浏览器中仍然可用，但 Fetch API 更加现代且易用
• 繁琐的用法：相对于 Fetch API，XMLHttpRequest 的用法相对繁琐，需要多个步骤配置和处理

Fetch API

• 现代API：Fetch API 是一个现代的 API，提供了更简单和灵活的方式来处理 HTTP 请求
• Promise基础：Fetch API 基于 Promise，使得异步代码更易读和管理
• 更直观的API设计：Fetch API 的设计更加直观，支持链式调用，简化了 HTTP 请求的写法

4. 总结

根据项目的需求和个人喜好，选择合适的 HTTP 请求方式是很重要的。XMLHttpRequest 适用于更古老的项目或需要与较老系统交互的场景，而 Fetch API 更适合现代化的项目，提供了更直观和简单的 API。希望通过本篇博客，你对 JavaScript 中使用 XMLHttpRequest 和 Fetch API 发送 HTTP 请求有了更深入的了解。