如何使用axios和Fetch轻松构建GitHub用户搜索页面 - React跨域配置教程

2024-01-20 00:48:24

引言

在当今的开发世界中，构建前端界面已成为一项基本技能。React作为一款备受欢迎的前端框架，凭借其组件化、声明式编程等特性，受到了众多开发者的青睐。而GitHub用户搜索页面是一个常见的需求，它可以帮助您轻松搜索和浏览GitHub上的用户资料。

使用axios构建GitHub用户搜索页面

首先，我们使用axios来实现GitHub用户搜索页面。axios是一个轻量级且功能强大的HTTP客户端库，它可以轻松处理各种HTTP请求。

安装axios

首先，需要在项目中安装axios。可以使用以下命令：

npm install axios

创建React组件

接下来，创建一个React组件来构建GitHub用户搜索页面。您可以使用以下代码创建一个简单的组件：

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

const GitHubUserSearch = () => {
  const [username, setUsername] = useState("");
  const [userData, setUserData] = useState(null);

  const handleSearch = () => {
    axios.get(`https://api.github.com/users/${username}`)
      .then(response => {
        setUserData(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  };

  return (
    <div>
      <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
      <button onClick={handleSearch}>搜索</button>
      {userData && (
        <div>
          <img src={userData.avatar_url} alt={userData.login} />
          <h1>{userData.name}</h1>
          <p>{userData.bio}</p>
        </div>
      )}
    </div>
  );
};

export default GitHubUserSearch;

渲染组件

最后，将组件渲染到页面中即可。

使用Fetch构建GitHub用户搜索页面

如果您更喜欢使用Fetch API，也可以使用它来构建GitHub用户搜索页面。Fetch API是浏览器中内置的一个用于发送HTTP请求的API。

创建React组件

首先，创建一个React组件来构建GitHub用户搜索页面。您可以使用以下代码创建一个简单的组件：

import React, { useState } from "react";

const GitHubUserSearch = () => {
  const [username, setUsername] = useState("");
  const [userData, setUserData] = useState(null);

  const handleSearch = () => {
    fetch(`https://api.github.com/users/${username}`)
      .then(response => response.json())
      .then(data => setUserData(data))
      .catch(error => {
        console.log(error);
      });
  };

  return (
    <div>
      <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
      <button onClick={handleSearch}>搜索</button>
      {userData && (
        <div>
          <img src={userData.avatar_url} alt={userData.login} />
          <h1>{userData.name}</h1>
          <p>{userData.bio}</p>
        </div>
      )}
    </div>
  );
};

export default GitHubUserSearch;

渲染组件

最后，将组件渲染到页面中即可。

配置代理解决跨域问题

在开发过程中，您可能会遇到跨域问题。这是因为浏览器出于安全考虑，限制了不同域之间的HTTP请求。要解决此问题，您可以使用代理。

安装proxy-middleware

首先，在项目中安装proxy-middleware。可以使用以下命令：

npm install proxy-middleware

配置代理

然后，在您的webpack配置中添加以下代码：

const proxy = require("proxy-middleware");

module.exports = {
  // ...其他配置
  devServer: {
    // ...其他配置
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};