获取 HTTP 或 HTTPS JavaScript

在 Web 开发中，经常需要从远程服务器获取数据，而 HTTP 和 HTTPS 协议是最常用的协议。JavaScript 提供了多种方式来获取 HTTP 或 HTTPS 数据，包括原生的 XMLHttpRequest 和基于 XMLHttpRequest 的辅助工具库，如 Axios。

XMLHttpRequest

XMLHttpRequest 是 JavaScript 中用来发送 HTTP 或 HTTPS 请求和接受服务器响应的 API。它支持所有 HTTP 方法和自定义请求头，并且可以发送和接收任意数据格式。

以下是一个使用 XMLHttpRequest 获取数据的示例代码：

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

以上代码使用 GET 方法获取 https://api.example.com/data 地址的数据。当 readyState 变为 XMLHttpRequest.DONE 且状态码为 200 时，响应数据将输出到控制台。

Fetch

Fetch 是原生 JavaScript API，可用于获取 HTTP 或 HTTPS 数据，它支持 Promise，并且返回的响应对象更加可读。Fetch API 是基于 Promise 设计的，可以使用 async/await 语法进一步简化代码。

以下是一个使用 Fetch 获取数据的示例代码：

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

以上代码通过 fetch() 方法获取 https://api.example.com/data 地址的数据，并使用 .json() 方法将响应解析为 JSON 格式。最后数据输出到控制台。如果获取数据失败，则会抛出错误并记录到控制台。

Axios

Axios 是一个基于 Promise 的 HTTP 库，它可用于运行在浏览器和 Node.js 平台上的 JavaScript 应用程序。它支持所有 HTTP 方法，包括上传和下载文件、开箱即用的支持异步请求、取消请求和事件监听等功能。

以下是一个使用 Axios 获取数据的示例代码：

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

以上代码使用 axios.get() 方法获取 https://api.example.com/data 地址的数据，并输出到控制台。如果获取数据失败，则会抛出错误并记录到控制台。

总结

本文介绍了 JavaScript 中的三种方式来获取 HTTP 或 HTTPS 数据，包括 XMLHttpRequest、Fetch 和 Axios。每种方式都有其优缺点，具体使用可根据实际需求选择适合的方式。