JavaScript发送HTTP请求指南：Fetch API、XMLHttpRequest和Axios详解

在Web开发中，使用JavaScript发送HTTP请求是与服务器交互、获取数据和实现动态更新的关键。本文将介绍三种常用的发送HTTP请求的方法：内置的Fetch API、XMLHttpRequest和流行的第三方库Axios，并提供示例代码和解释，帮助你快速掌握。

1. 使用Fetch API

Fetch API是现代浏览器内置的用于发送网络请求的接口，它提供了简洁易用的语法。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

解释：

使用fetch()函数发送请求，传入目标URL。
fetch()返回一个Promise对象，使用.then()处理成功响应。
response.json()将响应解析为JSON格式。
.catch()用于捕获和处理请求过程中的错误。

2. 使用XMLHttpRequest

XMLHttpRequest是一个较早出现的API，提供了更底层的控制和灵活性。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log(data);
    } else {
      console.error('Error:', xhr.statusText);
    }
  }
};
xhr.send();

解释：

创建一个XMLHttpRequest对象。
使用open()方法配置请求，包括方法（GET、POST等）和URL。
设置onreadystatechange事件处理程序，监听请求状态变化。
使用send()方法发送请求。
在事件处理程序中检查readyState和status以确定请求是否成功，并处理响应数据。

3. 使用Axios库

Axios是一个基于Promise的HTTP请求库，提供了更简洁的API和更强大的功能，例如拦截器、取消请求等。

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

解释：

使用axios.get()发送GET请求，传入目标URL。
.then()处理成功响应，response.data包含解析后的数据。
.catch()捕获和处理错误。

注意： 使用Axios需要先安装： npm install axios，并在代码中导入：import axios from 'axios';

扩展

以上示例展示了基本的GET请求，你可以根据需求进行扩展：

发送POST请求： 在fetch()、xhr.open()或axios.post()中指定方法为'POST'，并设置请求体。
添加请求头： 使用headers选项设置请求头，例如添加授权信息。
处理其他数据格式： 根据响应类型使用不同的解析方法，例如response.text()获取文本。
错误处理： 实现更完善的错误处理机制，例如根据HTTP状态码进行不同的操作。

希望本文能帮助你理解如何使用JavaScript发送HTTP请求，并根据实际需求选择合适的方法和工具。

JavaScript发送HTTP请求指南：Fetch API、XMLHttpRequest和Axios详解