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

想要在你的 JavaScript 项目中与服务器交互并获取数据？掌握如何发起 HTTP 请求是必不可少的技能。

本指南将带你了解两种常用的发起 HTTP 请求的方法：

XMLHttpRequest 对象: 久经考验的传统方法
Fetch API: 现代化、更简洁的选择

使用 XMLHttpRequest 对象

XMLHttpRequest 对象允许你使用 JavaScript 发送网络请求。以下是使用 XMLHttpRequest 发送 GET 请求的步骤：

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

// 2. 设置请求方法和 URL
xhr.open('GET', 'https://api.example.com/data', true); // true 表示异步请求

// 3. 可选：设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 4. 可选：设置响应类型
xhr.responseType = 'json';

// 5. 定义请求完成时的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) { // 检查请求是否成功
    console.log('请求成功:', xhr.response);
  } else {
    console.error('请求出错，状态码为:', xhr.status);
  }
};

// 6. 可选：定义请求错误时的回调函数
xhr.onerror = function() {
  console.error('请求出错');
};

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

解释：

我们首先创建一个 XMLHttpRequest 对象。
使用 open() 方法初始化请求，指定请求方法 ('GET', 'POST' 等) 和目标 URL。
（可选）使用 setRequestHeader() 设置请求头，例如内容类型。
（可选）使用 responseType 属性设置预期响应数据的类型。
使用 onload 事件处理程序定义请求成功完成时的回调函数。
使用 onerror 事件处理程序定义请求失败时的回调函数。
最后，使用 send() 方法发送请求。

使用 Fetch API

Fetch API 提供了一种更现代化、更简洁的方式来处理网络请求。

发送 GET 请求：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { // 检查请求是否成功
      throw new Error('请求出错');
    }
    return response.json(); // 解析 JSON 响应
  })
  .then(data => {
    console.log('请求成功:', data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

发送 POST 请求：

fetch('https://api.example.com/data', {
  method: 'POST', // 请求方法
  headers: {'Content-Type': 'application/json'}, // 请求头
  body: JSON.stringify({key: 'value'}) // 请求体
})
  .then(response => {
    if (!response.ok) {
      throw new Error('请求出错');
    }
    return response.json();
  })
  .then(data => {
    console.log('请求成功:', data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

解释：

fetch() 函数返回一个 Promise 对象，该对象代表网络请求的结果。
使用 .then() 方法链接回调函数，处理成功响应。
使用 .catch() 方法捕获并处理错误。
response.json() 方法用于解析 JSON 格式的响应。

总结

你现在已经了解了使用 JavaScript 发起 HTTP 请求的两种常用方法。XMLHttpRequest 提供了更大的灵活性和控制力，而 Fetch API 则更易于使用和阅读。选择哪种方法取决于你的具体需求和项目风格。

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