JavaScript 发起 HTTP 请求: XMLHttpRequest 与 Fetch API 教程

在 Web 开发中，经常需要使用 JavaScript 向服务器发送请求并获取数据。JavaScript 提供了两种主要方式来实现这一目标：传统的 XMLHttpRequest 对象和现代的 Fetch API。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象允许您在 JavaScript 中创建 HTTP 请求。以下是使用 XMLHttpRequest 发送 GET 请求的示例：javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); console.log(response); }};xhr.send();

代码解释:

创建一个新的 XMLHttpRequest 对象。2. 使用 open() 方法初始化请求，指定请求方法 ('GET')、请求 URL 和是否异步 (true)。3. 设置 onreadystatechange 事件处理程序，该程序在请求状态发生变化时执行。4. 检查 readyState 是否为 4 (请求已完成) 以及 status 是否为 200 (请求成功)。5. 如果请求成功，则使用 JSON.parse() 解析响应数据并将其打印到控制台。6. 使用 send() 方法发送请求。

使用 Fetch API

Fetch API 提供了一种更简洁、更现代的方式来发送 HTTP 请求。以下是使用 Fetch API 发送 GET 请求的示例：javascriptfetch('https://api.example.com/data') .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.log(error));

代码解释:

使用 fetch() 函数发起请求，传入请求 URL。2. fetch() 函数返回一个 Promise 对象，可以使用 then() 方法处理成功的响应。3. 使用 response.json() 方法将响应数据解析为 JSON 对象。4. 在第二个 then() 方法中，您可以访问解析后的数据并将其打印到控制台。5. 使用 catch() 方法处理请求过程中发生的任何错误。

XMLHttpRequest 与 Fetch API 的比较

| 特性 | XMLHttpRequest | Fetch API ||---|---|---|| 语法 | 比较繁琐 | 更简洁，使用 Promise || 错误处理 | 需要手动检查状态码 | 使用 catch() 方法更方便 || 异步性 | 默认异步 | 始终异步 || 取消请求 | 支持 | 支持 |

总结:

无论您选择 XMLHttpRequest 还是 Fetch API，都可以使用 JavaScript 发送 HTTP 请求并处理响应。Fetch API 提供了一种更现代、更易用的方式，而 XMLHttpRequest 则提供了更精细的控制。选择哪种方法取决于您的具体需求和编码风格。

JavaScript 发起 HTTP 请求: XMLHttpRequest 与 Fetch API 教程