Fetch API 与 XMLHttpRequest

etc

使用 Fetch API 与 XMLHttpRequest 进行网络请求

在现代的 Web 开发中，与服务器进行数据交互是非常常见的需求。为了实现这个目的，我们可以使用两种主要的方法：Fetch API 和 XMLHttpRequest。这两种方法都可以用来发送网络请求，并获取服务器返回的数据。本文将介绍这两种方法的使用，并提供一些案例代码供参考。

Fetch API

Fetch API 是一种现代的网络请求API，它提供了一种简单和强大的方式来发送网络请求。它基于 Promise，并且使用起来非常直观。下面是一个使用 Fetch API 发送 GET 请求的例子：

Javascript
fetch('https://api.example.com/data')
  .then(response => response.JSon())
  .then(data => {
    // 处理返回的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上面的代码中，我们使用 fetch 函数发送了一个 GET 请求，并指定了请求的 URL。然后，我们使用 .then 方法来处理服务器返回的响应。在第一个 .then 中，我们使用 response.JSon() 方法将响应的数据解析为 JSON 格式。然后，我们可以在第二个 .then 中处理返回的数据。如果请求发生错误，我们可以使用 .catch 来处理错误。

除了 GET 请求，Fetch API 还支持 POST、PUT、DELETE 等其他类型的请求。下面是一个使用 Fetch API 发送 POST 请求的例子：

Javascript
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/JSon'
  },
  body: JSON.stringify({
    username: 'example',
    password: '123456'
  })
})
  .then(response => response.JSon())
  .then(data => {
    // 处理返回的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上面的代码中，我们使用 fetch 函数发送了一个 POST 请求，并指定了请求的 URL、请求方法、请求头和请求体。请求头中的 Content-Type 指定了请求体的类型为 JSON。请求体中的数据使用 JSON.stringify 方法将 JavaScript 对象转换为 JSON 字符串。

XMLHttpRequest

XMLHttpRequest 是一种传统的网络请求API，在早期的 Web 开发中非常常见。它也可以用来发送网络请求，并获取服务器返回的数据。下面是一个使用 XMLHttpRequest 发送 GET 请求的例子：

Javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      // 处理返回的数据
      console.log(data);
    } else {
      // 处理错误
      console.error(xhr.status);
    }
  }
};
xhr.send();

在上面的代码中，我们首先创建了一个 XMLHttpRequest 对象，并使用 open 方法指定了请求的方法和 URL。然后，我们使用 onreadystatechange 事件处理程序来监听请求的状态变化。当请求的状态变为 XMLHttpRequest.DONE 时，我们可以通过 xhr.status 来获取响应的状态码。如果状态码为 200，表示请求成功，我们可以使用 xhr.responseText 来获取响应的文本数据，并使用 JSON.parse 方法将其解析为 JavaScript 对象。然后，我们可以处理返回的数据。如果请求发生错误，我们可以通过 xhr.status 来获取错误的状态码。

除了 GET 请求，XMLHttpRequest 也支持 POST、PUT、DELETE 等其他类型的请求。下面是一个使用 XMLHttpRequest 发送 POST 请求的例子：

Javascript
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data');
xhr.setRequestHeader('Content-Type', 'application/JSon');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      // 处理返回的数据
      console.log(data);
    } else {
      // 处理错误
      console.error(xhr.status);
    }
  }
};
xhr.send(JSON.stringify({
  username: 'example',
  password: '123456'
}));

在上面的代码中，我们首先创建了一个 XMLHttpRequest 对象，并使用 open 方法指定了请求的方法和 URL。然后，我们使用 setRequestHeader 方法设置了请求头，指定了请求体的类型为 JSON。然后，我们使用 onreadystatechange 事件处理程序来监听请求的状态变化，并处理返回的数据或错误。

本文介绍了使用 Fetch API 和 XMLHttpRequest 进行网络请求的方法，并提供了一些案例代码供参考。使用这两种方法可以方便地发送各种类型的网络请求，并获取服务器返回的数据。根据实际需求和项目要求，选择适合的方法来进行网络请求。

希望本文对你理解和使用 Fetch API 和 XMLHttpRequest 有所帮助！