JavaScript >> Javascript 文檔 >  >> Tags >> API

如何通過 Github API 使用 JavaScript 獲取 Repo 元數據

如何使用 JavaScript Fetch API 從 Github API 檢索存儲庫的元數據(例如,星級)。

開始使用

對於本教程,我們將使用 CheatCode Next.js 樣板作為我們工作的起點。首先,讓我們克隆該項目的 repo 副本:

終端

git clone https://github.com/cheatcode/nextjs-boilerplate.git

接下來,cd 進入 repo 並安裝其依賴項:

終端

cd nextjs-boilerplate && npm install

最後,繼續啟動開發服務器:

終端

npm run dev

有了這個,我們就可以開始了。

創建 React.js 組件以呈現 Repo 數據

首先,我們將創建一個 React 組件,我們將從 Github API 獲取和呈現我們的數據。對於我們的組件,我們將使用函數組件模式:

/pages/index.js

import React from "react";
import StyledIndex from "./index.css";

const Index = () => {
  return (
    <StyledIndex>
      // We'll build out the core of our component here...
    </StyledIndex>
  );
};

Index.propTypes = {};

export default Index;

因為我們使用的樣板是基於 Next.js,為了定義我們的組件,我們需要將它添加到 /pages 項目根目錄下。在幕後,Next.js 將自動在我們的應用程序(在瀏覽器中)創建一個路由,它將渲染我們創建的組件(在本例中,位於 http://localhost:5000/ 因為我們正在創建 /pages/index.js )。

上面,我們正在設置我們的基礎組件 <Index /> 並將其導出為 default 從我們的文件中(Next.js 需要)。查看代碼,我們從創建樣式組件開始:一種通過動態生成包裝組件來為 React 組件添加樣式的方法——這裡是 <StyledIndex />—that has CSS attached to it. Real quick, let's open up that /pages/index.css.js` 文件在這裡被導入並添加我們稍後需要的樣式:

/pages/index.css.js

import styled from "styled-components";

export default styled.div`
  display: inline-block;
  border: 1px solid #eeeeee;
  padding: 40px;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.02);

  > h4 {
    font-size: 16px;
    text-transform: uppercase;
    color: #aaaaaa;
  }

  > h4 .fa-star {
    color: #ffcc00;
  }

  > h1,
  > h2,
  > h3,
  > h4,
  > h5,
  > h6 {
    margin: 0;
  }

  > h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 10px 0 5px;
  }

  > p {
    font-size: 20px;
    color: #888888;
    margin: 0;
  }

  > p > a {
    display: inline-block;
    font-size: 16px;
    color: #0099ff;
    margin-top: 10px;
  }

  > div {
    margin-top: 20px;
  }

  > div {
    display: flex;
    align-items: center;
  }

  > div img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 15px;
  }

  > div a {
    color: #aaaaaa;
  }

  > div h5 {
    margin: 0;
  }

  > div p {
    margin: 0;
  }
`;

在這裡,我們導入一個對象 styled 其中包含一系列函數,每個函數代表一個標準的 HTML 元素。調用該函數時,它需要一個 JavaScript 字符串作為包含 CSS 樣式的參數,以附加到函數返回的元素。

我們使用 styled.div 函數,使用 JavaScript 中的簡寫方法來調用函數,其中傳遞的唯一參數是一個字符串:調用函數,但不是括號,而是緊跟一對反引號。在這些反引號之間,我們將一些 CSS 作為字符串傳遞(同樣,反引號只是在 JavaScript 中創建字符串的另一種方式)來幫助我們設置標記樣式,接下來我們將在組件中渲染我們的 Github 存儲庫數據。

/pages/index.js

import React, { useState, useEffect } from "react";
import StyledIndex from "./index.css";

const Index = () => {
  const [loading, setLoading] = useState(true);
  const [repoName, setRepoName] = useState("");
  const [repoDescription, setRepoDescription] = useState("");
  const [repoOwner, setRepoOwner] = useState({
    username: "",
    url: "",
    avatar: "",
  });
  const [repoURL, setRepoURL] = useState("");
  const [repoStars, setRepoStars] = useState(0);

  if (loading) {
    return <div></div>;
  }

  return (
    <StyledIndex>
      <h4>
        <i className="fas fa-star" /> {repoStars} Stars
      </h4>
      <h2>{repoName}</h2>
      <p>{repoDescription}</p>
      <p>
        <a href={repoURL}>{repoURL}</a>
      </p>
      {repoOwner && (
        <div className="owner">
          {repoOwner?.avatar && (
            <img src={repoOwner.avatar} alt={repoOwner.username} />
          )}
          <div>
            <h5>{repoOwner.username}</h5>
            <p>
              <a href={repoOwner.url}>{repoOwner.url}</a>
            </p>
          </div>
        </div>
      )}
    </StyledIndex>
  );
};

Index.propTypes = {};

export default Index;

充實我們的組件,因為我們將依賴於一個可能很慢的 API 請求——在一般意義上;在正常情況下,API 很快——我們將把我們想要在組件中渲染的數據放入狀態。

在這裡,因為我們使用的是函數組件模式(而不是基於類的模式),所以我們將使用 useState() 掛鉤函數來定義、設置和檢索我們不同的狀態值。

根據我們的需要,我們要在 state 上設置六個值:

  1. 一個loading 狀態,讓我們知道我們是否已完成 API 請求。
  2. repoName 對於我們請求的 URL。
  3. repoDescription 對於我們請求的 URL。
  4. repoOwner 我們請求的網址(由他們的用戶名、網址和頭像組成)。
  5. repoURL 對於我們請求的 URL(不同於我們將使用的 API URL)。
  6. repoStars 對於我們請求的 URL。

對於上述每一項,我們調用 useState() ,為每個傳入一個默認值,並期待一個 JavaScript 數組作為回報。在這些數組中,我們期望狀態值的當前值位於第一個位置(0 index) 和第二個位置 (1 的狀態值的 setter 函數 索引)。

為了使我們的代碼更易於閱讀,我們使用 JavaScript 數組解構來訪問這些值。這使我們可以同時訪問數組值並將其分配給變量。例如,這裡 const [repoName, setRepoName] = useState(""); ,可以改寫為:

const state = useState("");
const repoName = state[0];
const setRepoName = state[1];

因為這更冗長——並且可以說更令人困惑——我們使用 JavaScript 數組解構模式來代替。

下面是我們對 useState() 的調用 ,我們確保返回一個空的 <div></div> 如果我們的 loading 狀態值當前為 true (這將防止我們在 before 渲染我們的 repo 信息的地方出現不必要的 HTML 閃現 我們已經從 API 收到數據)。

假設 loading 是假的,我們繼續我們的 return 值,在這裡,我們有我們的 <StyledIndex /> 我們在上面學到的組件包裹著我們將用來渲染我們的組件的標記(我們之前設置的樣式)。這裡沒有什麼特別的,只是一個簡單的卡片式界面,可以渲染出我們的數據。

現在是有趣的部分。接下來,我們需要添加從 Github API 獲取數據的功能。好消息:我們不需要做任何特殊的身份驗證工作流作為我們想要使用的 URL https://api.github.com/repos/<user>/<repo> 是一個面向公眾的 API 端點。

使用 Fetch API 從 Github API 獲取 Repo 數據

現在,為了完成所有這些工作,我們要實現對 Github API 的調用。為此,我們將使用 JavaScript Fetch API 來執行我們的 HTTP 請求。這個 API 是內置於現代網絡瀏覽器的,所以我們不需要安裝任何額外的東西。

/pages/index.js

import React, { useState, useEffect } from "react";
import StyledIndex from "./index.css";

const Index = () => {
  const [loading, setLoading] = useState(true);
  const [repoName, setRepoName] = useState("");
  const [repoDescription, setRepoDescription] = useState("");
  const [repoOwner, setRepoOwner] = useState({
    username: "",
    url: "",
    avatar: "",
  });
  const [repoURL, setRepoURL] = useState("");
  const [repoStars, setRepoStars] = useState(0);

  useEffect(() => {
    fetch(
      `https://api.github.com/repos/cheatcode/nodejs-server-boilerplate`
    ).then(async (response) => {
      // We'll handle the response from the Github API here...
    });
  }, []);

  if (loading) {
    return <div></div>;
  }

  return (
    <StyledIndex>
      ...
    </StyledIndex>
  );
};

Index.propTypes = {};

export default Index;

在我們對 useState() 的調用之間 和我們的 if (loading) 有條件的,我們添加了對 useEffect() 的調用 鉤子函數,從 react 導入 我們文件頂部的依賴項。這個函數允許我們在我們的組件渲染時運行任意代碼,以及當我們告訴它觀察的任何依賴項發生變化時。

在這裡,我們的目標是在頁面加載後立即運行我們的 API 請求,然後將我們從對該請求的響應中獲得的數據複製到我們組件的狀態值中。在我們這樣做之前,在我們傳遞給 useEffect() 的回調函數內部 (第二個參數[] 可以選擇包含一個值列表——例如,道具——它們會在它們改變時強制回調函數觸發),我們正在使用內置的 fetch() 設置對 API 的調用 我們上面暗示的方法。

我們向它傳遞 API 端點——用 api.github.com 表示 部分——我們希望 fetch 向其發出請求並為其處理響應。這裡,https://api.github.com/repos/cheatcode/nodejs-boilerplate 將返回 CheatCode Node.js 樣板的元數據。要查看我們期望返回的數據的預覽,請訪問您瀏覽器中的 URL。

在我們的代碼中,要訪問該響應,因為我們使用的是 fetch() ,我們需要指定我們希望如何獲取我們的數​​據作為回報:

/pages/index.js

import React, { useState, useEffect } from "react";
import StyledIndex from "./index.css";

const Index = () => {
  const [loading, setLoading] = useState(true);
  const [repoName, setRepoName] = useState("");
  const [repoDescription, setRepoDescription] = useState("");
  const [repoOwner, setRepoOwner] = useState({
    username: "",
    url: "",
    avatar: "",
  });
  const [repoURL, setRepoURL] = useState("");
  const [repoStars, setRepoStars] = useState(0);

  useEffect(() => {
    fetch(
      `https://api.github.com/repos/cheatcode/nodejs-server-boilerplate`
    ).then(async (response) => {
      const data = await response.json();

      // We'll copy our data over to state here...
    });
  }, []);

  if (loading) {
    return <div></div>;
  }

  return (
    <StyledIndex>
      ...
    </StyledIndex>
  );
};

Index.propTypes = {};

export default Index;

.then() 內部 我們已經鏈接到 fetch() 的回調 (我們本能地這樣做,因為我們期望 fetch() 返回一個 JavaScript Promise),為了返回我們的響應體作為 JSON 數據——此時,一個 JavaScript 對象——我們調用 .json() 我們在 response 上預期的功能 對像傳遞給我們的 .then() 回調。

因為我們期待這個 函數—response.json() ——同樣要返回一個 Promise,我們使用 async/await 模式告訴 JavaScript “在這種情況下,我們希望使用 await 聲明。”我們通過添加關鍵字 async 來聲明 到外部父範圍(在這種情況下,函數傳遞給 .then() ) 我們的 await 將使用語句。 這是必需的,因為如果我們不這樣做,JavaScript 會拋出運行時錯誤 .

有了這個,現在,在我們的 const data 變量,我們應該為我們的倉庫取回數據。讓我們將它添加到狀態:

/pages/index.js

import React, { useState, useEffect } from "react";
import StyledIndex from "./index.css";

const Index = () => {
  const [loading, setLoading] = useState(true);
  const [repoName, setRepoName] = useState("");
  const [repoDescription, setRepoDescription] = useState("");
  const [repoOwner, setRepoOwner] = useState({
    username: "",
    url: "",
    avatar: "",
  });
  const [repoURL, setRepoURL] = useState("");
  const [repoStars, setRepoStars] = useState(0);

  useEffect(() => {
    fetch(
      `https://api.github.com/repos/cheatcode/nodejs-server-boilerplate`
    ).then(async (response) => {
      const data = await response.json();

      if (data && data.name) {
        setRepoName(data.name);
      }

      if (data && data.description) {
        setRepoDescription(data.description);
      }

      if (data && data.owner) {
        setRepoOwner({
          username: data?.owner?.login,
          url: data?.owner?.url,
          avatar: data?.owner?.avatar_url,
        });
      }

      if (data && data.html_url) {
        setRepoURL(data.html_url);
      }

      if (data && data.stargazers_count) {
        setRepoStars(data.stargazers_count);
      }

      setLoading(false);
    });
  }, []);

  if (loading) {
    return <div></div>;
  }

  return (
    <StyledIndex>
      ...
    </StyledIndex>
  );
};

Index.propTypes = {};

export default Index;

在這裡,利用我們的 set 我們之前定義狀態值時收到的函數,我們編寫了一系列 if 聲明,每個聲明都確保我們做到 實際上取回 data 來自 Github,並且我們需要的每個值都存在於該響應中。如果是,我們調用適當的 set 函數——例如,setRepoName() — 從我們想要在屏幕上呈現的響應對像中傳遞相應的值。

我們對我們設置的每個狀態變量都這樣做,奇怪的人是 setRepoOwner 它傳遞一個包含三個屬性的對象(而不是直接傳遞一個值)。

這樣,假設一切正常並且 Github API 可用,我們應該會在瀏覽器中看到我們的 repo 數據:

嘗試用您自己的公共 repo 替換我們傳遞的 URL,然後查看它在瀏覽器中的呈現!

總結

在本教程中,我們學習瞭如何使用 Github JavaScript API 訪問 Github 存儲庫的公共元數據。我們學習瞭如何在 Next.js 中定義 React.js 組件,為我們提供了一種從 Github API 獲取數據以及在屏幕上呈現數據(並使用樣式化組件對其進行樣式化)的方法。

最後,我們學習瞭如何使用 JavaScript fetch() 執行 HTTP 請求 API 以及如何將數據從 HTTP 請求復製到我們組件的狀態以在屏幕上動態呈現它。


Tutorial JavaScript 教程
  1. 02:前端開發

  2. 結合 AWS AppSync 將 react-apollo 從 v2 遷移到 v3

  3. 打字稿。乍一看

  4. Web 組件,它們是什麼以及如何創建它們(第 1 部分)

  5. 用 React+SVG 解釋一致性哈希

  6. 使用 Unity 5 和 JavaScript 創建 WebGL 遊戲

  7. Node.js 101 - 創建一個小 API

  1. 在 Cypress 測試中使用 Gherkin

  2. 錄製時編碼比看起來更難。

  3. Javascript獲取對象鍵名

  4. 將實體框架對象序列化為 JSON

  5. React 中的 GraphQL 與 Apollo

  6. 帶有 Three.JS 的音樂可視化器

  7. 如何掌握 React 庫和持續部署

  1. Javascript 畫布:繪製常規圖形

  2. 多語言會議室 Deepgram x DEV.to

  3. 如何創建 ERC20 代幣和 Solidity 供應商合約來出售/購買您自己的代幣

  4. 什麼是核心網絡生命力