使用个人访问令牌进行 Github API 调用 使用 Node JS 和 React JS 进行 Fetch

Question

今天，我在使用 GitHub API 时遇到了每小时 60 次调用的障碍，如此处所述 - https://developer.github.com/v3/rate_limit/

对于命令行测试，解决方案是使用 PAT - https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token

我是新学习者，但 GitHub 文档有点令人困惑，所以我跑了很多地方。Github 推荐以下 CURL 用法

curl -u GitHubUserName:personalaccesstoken https://api.github.com/users/GitHubUserName

但是，在获取请求中使用它是一个挑战，因为在如何使用事物的管道中存在许多折旧。

那么，问题是，如何最好地在 Node JS 和 React JS 中的简单 fetch 调用中使其工作？

Answer 1

最终，我得到了以下代码块，使其正常工作。

import React, { useState, useEffect } from "react";
    
function GitHubUser({ login }) {
    const [data, setData] = useState();
    const [error, setError] = useState();
    const [loading, setLoading] = useState(false);
   
    useEffect(() => {
      if (!login) return;
      setLoading(true);
      fetch(`https://api.github.com/users/GitHubUserName`,{
        method: "GET",
        headers: {
          Authorization: `token personalaccesstoken ` 
        }
      })
        .then(data => data.json())
        .then(setData)
        .then(() => setLoading(false))
        .catch(setError);
    }, [login]);
    
    if (loading) return <h1>loading...</h1>;
    if (error)
      return <pre>{JSON.stringify(error, null, 2)}</pre>;
    if (!data) return null;
  
    return (
      <div className="githubUser">
        <img
          src={data.avatar_url}
          alt={data.login}
          style={{ width: 200 }}
        />
        <div>
          <h1>{data.login}</h1>
          {data.name && <p>{data.name}</p>}
          {data.location && <p>{data.location}</p>}
        </div>
      </div>
    );
  }
    
export default function App() {
  return <GitHubUser login="GitHubUserName" />;
}

主要的困惑是，在 GitHub 文档的某些部分中，它一直说我们应该使用用户名、基本的以及不应该使用的内容。也许这对我来说只是困惑，但这解决了它。