JavaScript 发出 HTTP 请求：XMLHttpRequest 和 Fetch API 教程

想要使用 JavaScript 发出 HTTP 请求？你有两种强大的工具可以选择：内置的 XMLHttpRequest 对象和现代的 fetch 函数。

使用 XMLHttpRequest 发出 GET 请求

以下是如何使用 XMLHttpRequest 对象发出 HTTP GET 请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

在这个例子中：

1. 我们创建了一个新的 XMLHttpRequest 对象。
2. 使用 open() 方法初始化请求，指定请求方法 (GET)、请求 URL 和是否异步 (true)。
3. 使用 onreadystatechange 事件监听请求状态变化。
4. 当请求完成 (readyState 为 4) 且响应成功 (status 为 200) 时，解析 JSON 格式的响应数据并打印到控制台。
5. 最后，使用 send() 方法发送请求。

使用 Fetch API 发出 GET 请求

fetch 函数提供了一种更简洁、更现代的发出 HTTP 请求的方式：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

使用 fetch 的步骤：

1. 调用 fetch() 函数并传入请求 URL。
2. fetch() 返回一个 Promise 对象，使用 .then() 方法处理成功的响应。
3. 使用 response.json() 方法将响应数据解析为 JSON 格式。
4. 在第二个 .then() 方法中处理解析后的 JSON 数据。
5. 使用 .catch() 方法捕获并处理请求过程中发生的错误。

注意:

• 以上示例中的 URL 可以替换为您要发送请求的 API 的地址。
• 您还可以根据需要添加请求头、请求体等其他参数。

希望这篇教程能帮助你学会如何使用 JavaScript 发出 HTTP 请求！