文章摘要
GPT 4
投诉

介绍

Github API提供了许多不需要token即可食用的api，那今天就用它来显示自己的Github账户的followers的个数。

这里使用了Javascript的Fetch API

效果预览

实现步骤

新建js文件

文件名任意

注意将第四行的{你的Github用户名}改为自己的用户名，不带{}

1
2
3
4
5
6
7
8
9
10
// 请注意此 Web API 的兼容性，
// 不支持 IE, iOS Safari < 10.1，
// 完整支持列表参考：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
fetch('https://api.github.com/users/{你的Github用户名}')
  .then(response => response.json())
  .then(data => {
    const followers = document.querySelector('#gh_followers')
    followers.innerText = data.followers
  })
  .catch(console.error)

创建DOM

你可以用任意文字型的元素，但注意它们都需要带有id：gh_followers，以下为一些实例：

1
2
3
4
## 示例1
<h1 id="gh_followers"><h1>
## 示例2
<span id="gh_followers"></span>

而在pug语法中，你可以这么写：

1
2
3
4
## 示例1
span.gh_followers
## 示例2
h1.gh_followers

在适当的地方加入此代码，就会显示你的followers个数（纯数字）

引入js文件

这玩意大家应该都会，不会的自己查！

扩展

当Github API抽风时，可能导致无法获取数据，为了避免没数字的尴尬，我们可以加入加载图标让用户知道是API出了问题或出现卡顿
进行一下操作前请确保您已引入Fontawesome的css，不会的请自行百度

html修改方法

1
2
3
<span id="gh_followers">
  <i class="fas fa-spinner fa-spin-pulse"></i>
</span>

pug修改方法

1
2
3
span.gh_followers 
  i.fas.fa-spinner.fa-spin-pulse