JavaScript 发送 HTTP 请求：Fetch API 与 XMLHttpRequest 指南

JavaScript 发送 HTTP 请求：Fetch API 与 XMLHttpRequest 指南

在 Web 开发中，使用 JavaScript 发送 HTTP 请求是与服务器交互和构建动态应用的关键。本文将介绍两种常用的方法：现代的 Fetch API 和传统的 XMLHttpRequest 对象，帮助您理解如何发送 GET、POST 等请求。

Fetch API

Fetch API 提供了一种简洁、基于 Promise 的方式来发送 HTTP 请求。

fetch(url, {
  method: 'GET', // 可选：GET、POST、PUT、DELETE 等
  headers: {
    'Content-Type': 'application/json', // 可选：设置请求头
  },
  // 可选：请求体，例如：body: JSON.stringify(data)
})
.then(response => response.json()) // 处理响应数据
.then(data => {
  // 对响应数据进行操作
  console.log(data);
})
.catch(error => {
  // 处理错误
  console.error('Error:', error);
});

代码解释：

1. fetch(url, options)：发起请求，url 为目标 URL，options 为可选的配置对象，包括请求方法 (method)、请求头 (headers)、请求体 (body) 等。
2. .then(response => response.json())：处理响应，将响应数据解析为 JSON 格式。
3. .then(data => { ... })：成功处理响应，访问解析后的 JSON 数据。
4. .catch(error => { ... })：处理请求过程中的错误。

XMLHttpRequest 对象

XMLHttpRequest 对象是一种传统的发送 HTTP 请求的方式，提供了更细粒度的控制。

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // true 表示异步请求
xhr.setRequestHeader('Content-Type', 'application/json'); // 可选：设置请求头

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    var data = JSON.parse(xhr.responseText);
    // 对响应数据进行操作
    console.log(data);
  } else {
    // 处理错误
    console.error('Error:', xhr.status);
  }
};

xhr.onerror = function() {
  // 处理错误
  console.error('Request failed');
};

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

代码解释：

1. new XMLHttpRequest()：创建 XMLHttpRequest 对象。
2. xhr.open(method, url, async)：初始化请求，method 为请求方法，url 为目标 URL，async 表示是否异步 (true 为异步)。
3. xhr.setRequestHeader(header, value)：设置请求头。
4. xhr.onload：监听请求成功完成事件。
5. xhr.onerror：监听请求失败事件。
6. xhr.send(body)：发送请求，body 为可选的请求体。

总结

本文介绍了使用 Fetch API 和 XMLHttpRequest 对象发送 HTTP 请求的两种常见方法。Fetch API 更简洁易用，而 XMLHttpRequest 提供更细粒度的控制。选择哪种方法取决于您的具体需求。