从 HttpClient 转换为 Native HTTP - JavaScript

在开发 Web 应用程序时，发送 HTTP 请求是一个必要的任务。我们经常使用第三方 HTTP 客户端库（如 axios、request、superagent 等）来发送请求。然而，有时候我们也需要直接使用浏览器原生的 HTTP API 来发送请求。

在本文中，我们将介绍如何将 HttpClient 转换为浏览器原生的 HTTP API。具体来说，我们将学习如何使用 fetch 和 XMLHttpRequest 来发送 HTTP 请求。

从 HttpClient 到 fetch API

fetch API 是浏览器原生的 HTTP API 之一，它可以轻松发送 HTTP 请求并处理响应。下面是一个使用 fetch API 发送 GET 请求的示例代码：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

这个代码片段发送了一个 GET 请求，并在控制台中打印了响应数据。首先，我们使用 fetch 方法发起 GET 请求。然后，我们使用 then 方法处理响应数据，该方法接收一个回调函数作为参数，该回调函数接收响应对象作为参数，并返回一个 Promise 对象。在我们的回调函数中，我们使用 json 方法将响应数据转换为 JSON 格式。最后，我们使用 catch 方法处理错误。

上面的代码使用 fetch API 发送了一个简单的 GET 请求，如果您需要 POST、PUT、DELETE 等请求，请查阅相关文档。

从 HttpClient 到 XMLHttpRequest

如果您的 Web 应用程序需要支持旧版浏览器（如 IE9 和 IE8），那么您需要使用 XMLHttpRequest API。XMLHttpRequest 提供了一种发送 AJAX 请求的方法，这种方法已经广泛使用，并被所有主要浏览器（包括 IE8 和 IE9）支持。

下面是一个使用 XMLHttpRequest 发送 POST 请求的示例代码：

const xhr = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/posts';
const data = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1
});

xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 201) {
    console.log(xhr.responseText);
  }
};

xhr.send(data);

在这个代码片段中，我们创建了一个 XMLHttpRequest 对象，并使用 open 方法设置请求方法、URL 和异步标识符。然后，我们使用 setRequestHeader 方法设置请求头的 Content-Type 属性。接下来，我们添加一个 onreadystatechange 事件监听器，它会在每次请求状态发生变化时被触发。最后，我们使用 send 方法发送请求，并传递要发送的数据。

请注意，XMLHttpRequest 发送的请求可能会受到跨域限制。如果您需要发送跨域请求，请查阅相关文档。

结论

在本文中，我们学习了如何将 HttpClient 转换为浏览器原生的 HTTP API，并使用 fetch 和 XMLHttpRequest 发送了一些简单的 HTTP 请求。请注意，使用 fetch API 的代码更为简洁简单，但需要注意一些细节，例如请求的 CORS 限制和跨域请求。XHTtpRequest 的兼容性更好，但使用时更为繁琐。根据您的具体需求，选择合适的 API 来发送 HTTP 请求。