JavaScript 发出 HTTP 请求终极指南：XMLHttpRequest vs. Fetch

想要在你的 JavaScript 项目中与服务器交互、获取数据或发送信息吗？掌握如何发出 HTTP 请求是必不可少的技能。在本指南中，我们将深入探讨两种最常用的方法：传统的 XMLHttpRequest 对象和现代的 fetch 函数。

XMLHttpRequest：久经考验的选择

XMLHttpRequest 对象是 AJAX 技术的基石，允许你异步地发送 HTTP 请求并处理响应，而无需刷新整个页面。

以下是使用 XMLHttpRequest 对象发送 GET 请求的步骤：

1. 创建 XMLHttpRequest 对象：

   javascript var xhr = new XMLHttpRequest();

2. 设置请求方法和 URL：

   javascript xhr.open('GET', 'https://api.example.com/data', true);

   • 第一个参数指定 HTTP 方法（'GET'、'POST'、'PUT'、'DELETE' 等）。 - 第二个参数是 API 端点 URL。 - 第三个参数设置为 true 表示异步请求。

3. 监听请求状态变化：

   javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功 var response = JSON.parse(xhr.responseText); console.log(response); } };

   • xhr.readyState 表示请求状态，4 代表请求完成。 - xhr.status 表示 HTTP 状态码，200 代表成功。

4. 发送请求：

   javascript xhr.send();

**示例：**javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); } else { console.error('请求失败:', xhr.status); } }};xhr.send();

Fetch API：现代的改进

fetch 函数提供了一种更简洁、更符合 Promise 风格的发送 HTTP 请求的方式。

**基本语法：**javascriptfetch(url) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 });

**示例：**javascriptfetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok.'); } return response.json(); // 解析 JSON 响应 }) .then(data => { console.log(data); }) .catch(error => { console.error('Error:', error.message); });

XMLHttpRequest vs. Fetch：选择哪一个？

• 易用性： fetch 通常更简洁易用，特别是对于简单的请求。- 错误处理： fetch 的 Promise 结构简化了错误处理。- 浏览器支持： XMLHttpRequest 拥有更广泛的浏览器支持，但 fetch 也被大多数现代浏览器支持。

建议：

• 对于新项目，建议优先使用 fetch，因为它提供了更现代和易用的 API。- 对于需要支持旧版浏览器的项目，XMLHttpRequest 可能是更安全的选择。

总结

你现在已经了解了使用 XMLHttpRequest 和 fetch 发送 HTTP 请求的基础知识。请记住根据你的项目需求和浏览器兼容性要求选择合适的方法。祝你编码愉快！