JavaScript 发起 HTTP 请求终极指南：XMLHttpRequest 与 Fetch API

JavaScript 如何发起 HTTP 请求？

想要在 JavaScript 中发起 HTTP 请求，你可以使用内置的 XMLHttpRequest 对象或更现代的 fetch 函数。

以下是使用这两种方法的详细示例：

1. 使用 XMLHttpRequest:

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

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

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

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

// 处理响应
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    var response = xhr.response;
    // 处理响应数据
    console.log(response);
  } else {
    console.error('请求失败:', xhr.status);
  }
};

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

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

代码解析:

创建一个 XMLHttpRequest 对象。
使用 open() 方法初始化请求，设置请求方法 (GET/POST 等) 和目标 URL，第三个参数 true 表示使用异步请求。
可选地设置请求头，例如设置 Content-Type 为 'application/json'。
可选地设置响应类型，例如将 responseType 设置为 'json' 会自动解析 JSON 响应。
使用 onload 事件处理成功响应，检查状态码是否在 200 到 299 之间，并处理响应数据。
使用 onerror 事件处理请求错误，例如网络连接问题。
使用 send() 方法发送请求。

2. 使用 fetch:

// 发送 GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Fetch 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('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Fetch Error:', error);
  });

代码解析:

fetch() 函数返回一个 Promise 对象。
使用 .then() 方法链式处理响应。
第一个 .then() 中，检查 response.ok 确保请求成功。
使用 response.json() 解析 JSON 响应体。
第二个 .then() 中，处理解析后的 JSON 数据。
使用 .catch() 方法捕获任何错误，例如网络错误或解析错误。

XMLHttpRequest 与 fetch 的比较:

语法: fetch 使用更简洁的 Promise 语法，而 XMLHttpRequest 需要手动处理异步操作。
错误处理: fetch 默认只在网络错误时 reject，而 XMLHttpRequest 需要手动检查状态码。
功能: fetch 提供更现代的 API，例如 Request 和 Response 对象，以及对 Streams 的支持。

总结:

fetch 是更现代、更易用的发起 HTTP 请求的方式，但 XMLHttpRequest 仍然被广泛使用，并且在某些情况下可能更适合，例如需要更精细的控制或兼容性要求较高的场景。

希望这篇文章能够帮助你更好地理解如何在 JavaScript 中发起 HTTP 请求！

JavaScript 发起 HTTP 请求终极指南：XMLHttpRequest 与 Fetch API