JavaScript HTTP 请求：XMLHttpRequest、Fetch 和 Axios

使用 JavaScript 发出 HTTP 请求有多种方法，其中一些常用的方法包括 XMLHttpRequest 对象、fetch 函数和第三方库如 axios。

使用 XMLHttpRequest 发送 GET 请求

以下是使用 XMLHttpRequest 对象发送 GET 请求的示例代码：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求方法和 URL
xhr.open('GET', 'http://example.com/api', true);

// 发送请求
xhr.send();

// 监听请求状态变化
xhr.onreadystatechange = function() {
  // 如果请求已完成并且响应已准备就绪
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应数据
    var response = xhr.responseText;
    console.log(response);
  }
};

上述代码使用 XMLHttpRequest 对象创建了一个 GET 请求，并发送到指定的 URL。在 onreadystatechange 事件中，可以监听请求状态的变化，当状态为 4（请求已完成）且状态码为 200（成功响应）时，可以处理响应数据。

使用 Fetch 发送 GET 请求

fetch 函数是 JavaScript 中另一个发送 HTTP 请求的内置方法。它提供了更简洁的语法，并支持 Promise。以下是用 fetch 函数发送 GET 请求的示例代码：

fetch('http://example.com/api')
  .then(response => response.json())
  .then(data => console.log(data));

这段代码使用 fetch 函数发送了一个 GET 请求，并使用 .then() 方法处理响应数据。response.json() 方法将响应数据解析为 JSON 格式，并将其传递给下一个 .then() 方法。

使用 Axios 发送 GET 请求

axios 是一个流行的第三方库，它提供了简洁易用的 API，用于发送 HTTP 请求。以下是用 axios 发送 GET 请求的示例代码：

axios.get('http://example.com/api')
  .then(response => console.log(response.data));

这段代码使用 axios.get() 方法发送了一个 GET 请求，并使用 .then() 方法处理响应数据。response.data 属性包含响应数据。

选择哪种方法

具体选择哪种方法取决于你的项目需求和个人喜好。XMLHttpRequest 是 JavaScript 中内置的方法，但它比较复杂。fetch 函数提供了更简洁的语法，并支持 Promise。axios 则提供了更强大的功能，例如请求拦截器、错误处理等。

建议：

• 如果你需要简单的 GET 和 POST 请求，并且你的项目已经使用 Promise，那么 fetch 函数是一个不错的选择。
• 如果你需要更复杂的 HTTP 请求功能，例如请求拦截器、错误处理等，那么 axios 是一个更好的选择。