【JavaScript】发送HTTP请求

在 Web 开发中， 与服务器进行数据交互是常见的操作，而发送 HTTP 请求是实现这一目标的核心。本篇博客将介绍 JavaScript 中发送 HTTP 请求的几种常见方式，包括使用 XMLHttpRequest 对象、Fetch API 以及 Axios 库。

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. 使用Axios库

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。

发送GET请求

axios.get("https://api.example.com/data")
  .then(response => {
    console.log("Data:", response.data);
  })
  .catch(error => {
    console.error("Axios error:", error);
  });

发送POST请求

axios.post("https://api.example.com/post", { key: "value" })
  .then(response => {
    console.log("Data:", response.data);
  })
  .catch(error => {
    console.error("Axios error:", error);
  });

在使用 Axios 时，可以直接调用相应的 HTTP 方法，并使用 .then() 和 .catch() 处理响应和错误。

4. 总结

在 JavaScript 中，发送 HTTP 请求的方式有多种，选择适合自己项目需求的方式是很重要的。XMLHttpRequest 提供了基本的功能，Fetch API 提供了更现代的 API，而 Axios 则是一个流行的第三方库，提供了更多便捷的特性。根据项目的需求和个人偏好选择适合的方式进行 HTTP 请求。希望通过本篇博客，你对 JavaScript 中发送 HTTP 请求的几种方式有了更深入的了解。