在 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 请求的几种方式有了更深入的了解。