用 React Hooks 搭建一个简单的 HTTP 请求库

2024-03-09 22:58:22

在这个快节奏的网络世界中，与外部 API 和服务器通信变得越来越重要。对于前端开发人员而言，能够轻松地处理 HTTP 请求非常有价值。

React Hooks 是 React 16.8 中引入的一个强大功能，它使我们能够在不使用类组件的情况下使用状态和生命周期方法。本文将展示如何利用 React Hooks 构建一个简单但功能齐全的 HTTP 请求库。

构建 HTTP 请求库

首先，让我们创建一个新的 React 项目并安装必要的依赖项：

npx create-react-app http-request-hooks
cd http-request-hooks
npm install axios

useHttpRequest Hook

我们首先定义一个自定义 Hook useHttpRequest，它将处理 HTTP 请求的逻辑：

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

const useHttpRequest = (config) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const makeRequest = async (params) => {
    try {
      setLoading(true);
      const response = await axios(config, params);
      setData(response.data);
      setLoading(false);
    } catch (err) {
      setError(err);
      setLoading(false);
    }
  };

  return { data, error, loading, makeRequest };
};

export default useHttpRequest;

这个 Hook 接受一个配置对象作为参数，该对象定义了请求的 URL、方法、正文和其他选项。它返回一个对象，该对象包含请求的数据、错误、加载状态和一个 makeRequest 函数，该函数用于发起请求。

使用 HTTP 请求库

现在，我们可以在我们的组件中使用 useHttpRequest Hook：

import useHttpRequest from "./useHttpRequest";

const MyComponent = () => {
  const { data, error, loading, makeRequest } = useHttpRequest({
    url: "https://example.com/api/users",
    method: "GET",
  });

  useEffect(() => {
    makeRequest();
  }, []);

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;