JavaScript 发起 HTTP 请求完全指南：Fetch API 与 XMLHttpRequest

想要用 JavaScript 发送 HTTP 请求？你有两种强大的工具可选：Fetch API 和 XMLHttpRequest 对象。

使用 Fetch API 发起请求

Fetch API 提供了简洁现代的接口，让你可以用更直观的方式处理 HTTP 请求和响应。

fetch(url, {
  method: 'GET', // 请求方法（GET、POST 等）
  headers: {
    'Content-Type': 'application/json', // 设置请求头信息
  },
})
  .then(response => response.json()) // 将响应数据解析为 JSON 格式
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理请求错误
    console.error('Error:', error);
  });

代码解释：

1. 使用 fetch(url, options) 发起请求，其中 url 是目标地址，options 是可选的请求配置对象。
2. 通过 method 属性设置请求方法，如 'GET'、'POST'、'PUT'、'DELETE' 等。
3. headers 属性用于设置请求头信息，例如指定内容类型为 JSON。
4. 使用 .then() 处理响应，第一个 .then() 用于解析响应数据，这里将其转换为 JSON 格式。
5. 第二个 .then() 接收解析后的数据，你可以在此处理业务逻辑。
6. .catch() 用于捕获请求过程中的错误并进行处理。

使用 XMLHttpRequest 对象

XMLHttpRequest 是传统的 AJAX 请求方式，功能强大且兼容性好。

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 配置请求方法和 URL
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头信息

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText); // 解析响应数据
    // 处理响应数据
    console.log(response);
  }
};

xhr.onerror = function() {
  // 处理请求错误
  console.error('Error:', xhr.statusText);
};

xhr.send();

代码解释：

1. 创建 XMLHttpRequest 对象实例。
2. 使用 open() 方法初始化请求，设置请求方法、URL 和是否异步（true 表示异步）。
3. setRequestHeader() 设置请求头信息。
4. 监听 onreadystatechange 事件，根据 readyState 和 status 判断请求状态，并在请求成功时处理响应数据。
5. onerror 事件用于捕获请求错误。
6. send() 方法发送请求。

总结

无论是使用 Fetch API 还是 XMLHttpRequest，你都能轻松地使用 JavaScript 发送 HTTP 请求。选择哪种方法取决于你的项目需求和编码风格。

请注意：

• 请将代码中的 url 替换为实际的请求地址。
• 根据具体需求调整请求方法、请求头和响应处理逻辑。