react+axios实现github搜索用户功能(示例代码)

本文将详细讲解如何使用React和Axios来实现Github搜索用户的功能。其中包含两个示例说明，以带领读者逐步了解如何实现这一功能。

示例一：使用Github API搜索用户

在这个示例中，我们将使用Github API来搜索Github上的用户。首先，我们需要在Github上注册一个新的OAuth App，并获得一个访问令牌（access token）。在此之后，我们可以使用该令牌来访问Github API。

步骤一：创建新的React App

首先，我们需要创建一个新的React App，我们可以使用create-react-app来创建：

npx create-react-app github-search-app

步骤二：安装必要的依赖

在这个示例中，我们将使用Axios来访问Github API，所以我们需要先安装Axios：

npm install axios

步骤三：创建一个搜索组件

我们需要创建一个搜索组件来处理用户输入并触发搜索请求。在src目录下创建一个名为Search.js的文件，其中包含以下代码：

import React, { useState } from 'react';
import axios from 'axios';

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [users, setUsers] = useState([]);

  const handleSearch = async () => {
    const response = await axios.get(
      `https://api.github.com/search/users?q=${searchTerm}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
    );
    setUsers(response.data.items);
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      <button onClick={handleSearch}>Search</button>
      {users.map((user) => (
        <div key={user.id}>{user.login}</div>
      ))}
    </div>
  );
};

export default Search;

在这里，我们首先初始化了两个状态变量，一个用于存储搜索输入的值（searchTerm），另一个用于存储搜索结果的数组（users）。

在handleSearch函数中，我们使用Axios来发送一个GET请求到Github API。我们使用搜索输入的值作为查询参数（q），同时传递我们在Github上注册OAuth App时获得的client ID和client secret。在响应返回后，我们将搜索结果的items数组存储在users状态变量中。

在render函数中，我们渲染了一个包含一个文本框、一个搜索按钮和一个用户列表的div元素。当用户输入文本框时，我们将其值存储在searchTerm状态变量中。当用户点击搜索按钮时，我们调用handleSearch函数来发送请求。在用户列表中，我们使用.map函数遍历搜索结果的items数组，并使用用户的login属性渲染一个div元素。

步骤四：将搜索组件添加到App.js中

最后，我们将Search组件添加到App.js中，并运行React应用程序。

在src目录下的App.js文件中添加以下代码：

import React from 'react';
import Search from './Search';

function App() {
  return (
    <div className="App">
      <Search />
    </div>
  );
}

export default App;

现在，我们可以在控制台中使用以下命令来启动应用程序：

npm start

在浏览器中，我们将看到一个搜索组件，可以使用它来搜索Github上的用户。

示例二：使用Github GraphQL API搜索用户

在这个示例中，我们将使用Github的GraphQL API来搜索用户。GraphQL允许我们查询更具体的数据，从而减少我们需要获取的数据量。

步骤一：注册一个新的OAuth App

使用GraphQL API需要我们注册一个新的OAuth App并获取一个在此过程中生成的访问令牌。这个过程与示例一中的过程是相同的。

步骤二：安装必要的依赖

在这个示例中，我们需要使用Apollo Client来发送GraphQL查询。因此，我们需要安装Apollo Client：

npm install apollo-boost react-apollo graphql-tag graphql

步骤三：创建一个搜索组件

我们需要创建一个新的Search组件，该组件将使用Apollo Client来发送GraphQL查询。在src目录下创建一个名为SearchGraphQL.js的文件，其中包含以下代码：

import React, { useState } from 'react';
import { ApolloProvider, ApolloClient, HttpLink, InMemoryCache, gql, useQuery } from '@apollo/client';

const SearchGraphQL = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const SEARCH_USERS = gql`
    query searchUsers($query: String!) {
      search(query: $query, type: USER, first: 10) {
        nodes {
          ... on User {
            id
            login
          }
        }
      }
    }
  `;

  const { loading, error, data } = useQuery(SEARCH_USERS, {
    variables: {
      query: searchTerm,
    },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      {data &&
        data.search.nodes.map((user) => (
          <div key={user.id}>
            {user.login} ({user.id})
          </div>
        ))}
    </div>
  );
};

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://api.github.com/graphql',
    headers: {
      Authorization: `Bearer ${process.env.REACT_APP_GITHUB_ACCESS_TOKEN}`,
    },
  }),
  cache: new InMemoryCache(),
});

const SearchGraphQLWrapper = () => {
  return (
    <ApolloProvider client={client}>
      <SearchGraphQL />
    </ApolloProvider>
  );
};

export default SearchGraphQLWrapper;

首先，我们使用useState来创建一个状态变量，该变量存储用户的搜索输入。

接下来，我们定义一个GraphQL查询SEARCH_USERS，该查询将使用search方法来搜索Github上的用户。我们使用$符号来传递查询参数query。在我们查询的结果中，我们只获取用户列表，并且只包括它们的id和login。

在useQuery hook中，我们使用Apollo Client来发送查询，并将搜索输入的值作为variables参数传递。

在render函数中，如果loading为true，则显示Loading...。如果查询出错，则显示Error :(。如果查询成功，我们将渲染包含一个文本框和一个用户列表的div元素。用户列表使用.map函数遍历搜索结果，并渲染每个用户的login和id。

在SearchGraphQLWrapper组件中，我们使用ApolloProvider将ApolloClient添加到React应用程序的顶层组件中。

步骤四：将SearchGraphQL组件添加到App.js中

最后，我们将SearchGraphQL组件添加到App.js中，并运行React应用程序。

在src目录下的App.js文件中添加以下代码：

import React from 'react';
import SearchGraphQL from './SearchGraphQL';

function App() {
  return (
    <div className="App">
      <SearchGraphQL />
    </div>
  );
}

export default App;

现在，我们可以在控制台中使用以下命令来启动应用程序：

npm start

在浏览器中，我们将看到一个带有文本框的搜索组件，使用它可以使用Github GraphQL API搜索用户。