使用 Fetch 使用 REST API（Github 用户） - React 客户端

在本文中，您将学习开发一个 React 应用程序，该应用程序将使用 Fetch 从 REST API 中获取数据。我们将使用 GitHub 用户 API 使用用户名获取用户的公共信息。您可以在本文末尾找到 API 参考和源代码链接。

在进入开发部分之前，要初始化一个简单的 React 应用程序，您可以按照以下步骤操作：

第 1 步：创建 React 应用程序。

npx create-react-app foldername

第二步：进入项目文件夹。

cd foldername

第 3 步：创建一个组件文件夹，现在项目结构将如下所示：

项目结构

自定义组件位于components文件夹中，所有内容都放在MainComponent.js中，我们将把这个组件放在App.js 中，它本身位于“根”DOM 节点下，该节点内的所有内容都将由 React DOM 管理。

我们将开发三个组件：

• 主要组件：负责应用程序中的获取操作和状态更改。
• 搜索栏：用于获取 GitHub 用户名的用户输入的搜索栏。
• UserInfoCard：显示 GitHub 用户信息的可重用组件。

第 4 步：在MainComponent.js组件中，我们有两个状态变量，用户名（来自用户的输入）和 userData（来自 REST API 的响应）。每次更新用户名时，我们都需要获取用户数据。为了实现这一点，我们将使用 React 中的useEffect钩子。

Javascript

const [username, setUsername] = useState("");
const [userData, setUserData] = useState({});
  
useEffect(() => {
     getUserData();
 }, [username]);

第 5 步：现在要从 GitHub 用户 API 获取响应，我们将使用 Fetch 发出GET请求，这将是 getUserData()函数的作用。

Javascript

var gitHubUrl = `https://api.github.com/users/${username}`;
  
const getUserData = async () => {
        const response = await fetch(gitHubUrl);
        const jsonData = await response.json();
        if (jsonData && jsonData.message !== "Not Found") {
            setUserData(jsonData);
            console.log(jsonData)
        }
        else if (username !== "") {
            console.log('Username does not exist');
        }
        else {
            setUserData({})
        }
    };

getUserData() 是一个异步函数，其中fetch(gitHubUrl)发出请求并返回一个承诺。当请求完成时，promise 将通过响应对象解析。该对象基本上是各种响应格式的通用占位符。 response.json()用于从响应中提取 JSON 对象，它返回一个承诺，因此等待。

所以最后，我们的MainComponent.js文件看起来像：

Javascript

import React, { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
import UserInfoCard from "./UserInfoCard";
  
function Main() {
    const [username, setUsername] = useState("");
    const [userData, setUserData] = useState(Object);
      
    useEffect(() => {
        getUserData();
    }, [username]);
  
    var gitHubUrl = `https://api.github.com/users/${username}`;
  
    const getUserData = async () => {
        const response = await fetch(gitHubUrl);
        const jsonData = await response.json();
        if (jsonData && jsonData.message !== "Not Found") {
            setUserData(jsonData);
            console.log(jsonData)
        }
        else if (username !== "") {
            console.log('Username does not exist');
        }
        else {
            setUserData({})
        }
    };
      
    return (
        

            
            
        
    );
}
  
export default Main;

第 6 步：现在，转到 SearchBar 组件，该组件用于接收用户输入的用户名。它是一个简单的组件，具有文本类型的输入字段。在任何更改时，它都会触发具有更新值的setUsername 。

搜索栏.js

Javascript

import React from "react";
  
function SearchBar({username, setUsername}){
  
    const onChange = (e) =>{
        setUsername(e.target.value)
    }
    return(
        

         {onChange(event)}}
            onKeyUp={(event) => {onChange(event)}}
            onPaste={(event) => {onChange(event)}}
        />
        
    );
}
  
export default SearchBar;

第 7 步：我们的最后一个组件是一个可重用的 UI 组件，它基本上是一个卡片组件，它接收userData作为道具，并以任何选择的格式显示它。您可以调整App.css文件以了解各个设计方面。

用户信息卡.js

Javascript

import React from "react";
  
function UserInfoCard({ userData }) {
    return (
        

            {userData.avatar_url ? (

               
) : (
)}
            {userData.login ? (
Login: 
            {userData.login}
) : (
)}
            {userData.name ? (

            Name : {userData.name}
) : (
)}
            {userData.blog ? (

            Blog: {userData.blog}
) : (
)}
        
    );
}
  
export default UserInfoCard;

就是这样，将这三个组件放在一起，就完成了我们的 React 应用程序，您可以从下面提供的源代码链接下载该应用程序，并在您的系统上运行它。源代码确实包含一个额外的组件，用于将检索到的数据存储在本地存储中，本文未涉及。因此，如果您有兴趣，请继续检查一下。

运行应用程序的步骤：要在您的系统上启动应用程序，请运行以下命令：

npm start

输出：

GitHub 用户 API： https ://docs.github.com/en/rest/reference/users

获取 API： https ://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

源代码： https ://github.com/notnotparas/github-users-api