2

今天，我在玩 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

但是，然后，在 fetch 请求中使用它是一个挑战，因为管道中有许多关于如何使用事物的折旧。

那么问题来了，如何最好地在节点 JS 和 React JS 中通过简单的 fetch 调用来实现这一点？

4

1 回答 1

2

最终，我得到了下面的代码块，让它工作。

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 文档的某些部分，它一直在说我们应该使用用户名，以及基本的和不应该的。也许这对我来说只是困惑，但这解决了它。

于 2020-09-18T18:50:52.003 回答