📌  相关文章
📜  axios github - Html (1)

📅  最后修改于: 2023-12-03 14:39:26.030000             🧑  作者: Mango

使用 Axios 与 Github API 实现 Html 页面的数据请求

Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和node.js 中。它可以在浏览器中发送 XMLHttpRequest 请求，同时可以使用 Node.js 的 http 模块发送 HTTP 请求。

Github API 是 Github 提供的一种 RESTful API，通过 HTTP 请求可以获取 Github 上的各种数据，包括代码仓库、用户、issues 等等。可以使用 Axios 发送请求获取数据并在 Html 页面展示。

安装 Axios

可以使用 npm 或 yarn 安装 Axios：

npm install axios
# 或
yarn add axios
Github API 身份验证

去 Github Personal access tokens 点击 Generate new token 并获取 token。

在 Axios 的请求头中添加 Authorization 字段，值为 token [your token]：

axios.get('https://api.github.com/repos/facebook/react', {
  headers: {
    Authorization: 'token [your token]'
  }
})
在 Html 页面展示数据

在 Html 页面中可以使用 Ajax 和 Axios 请求 Github API 数据。Ajax 已经是 Web 开发的标配，但是 Axios 具有更好的封装性和可读性，因此这里使用 Axios。

如下面的代码所示，在 Html 页面中引入 Axios：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

然后使用 Axios 发送 GET 请求并展示数据：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Github Repo Data</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    const app = document.getElementById('app');
    axios.get('https://api.github.com/repos/facebook/react', {
      headers: {
        Authorization: 'token [your token]'
      }
    })
    .then(response => {
      app.innerHTML = `
        <p><strong>Repo Name:</strong> ${response.data.name}</p>
        <p><strong>Created at:</strong> ${response.data.created_at}</p>
        <p><strong>Description:</strong> ${response.data.description}</p>
      `;
    })
    .catch(error => {
      app.innerHTML = `<p>There was an error: ${error}</p>`;
    });
  </script>
</body>
</html>

上面的代码将展示从 Github API 获取的 Facebook/react 项目的名称，创建时间以及描述。

可以看到，使用 Axios 请求 Github API 并在 Html 页面中展示数据非常简单。Axios 可以轻松地与 Github API 集成，并且非常易于使用，使开发人员能够快速轻松地进行数据请求操作。