如何封装自己的useRequest hooks

2023-09-05 03:15:00

前言

在前后端分离的项目中，我们经常需要通过异步请求去获取数据。在这个异步请求的过程中，我们需要做特别多的处理，例如：展示loading，表示正在请求数据；每个异步操作都需要使用try-catch捕获错误。为了简化这些操作，我们可以使用自定义Hooks来封装这些逻辑。

使用useRequest hooks

首先，我们需要安装useRequest库：

npm install use-request

然后，在项目中创建一个名为useRequest.js的文件，并添加以下代码：

import { useState, useEffect } from "react";
import useRequest from "use-request";

const useRequest = (request, options) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    request(options)
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [request, options]);

  return { data, error, loading };
};

export default useRequest;

这个Hooks接受两个参数：一个request函数和一个options对象。request函数是我们要发起的请求，options对象是请求的配置选项。

使用示例

现在，我们可以在组件中使用useRequest hooks来发起请求：

import useRequest from "./useRequest";

const MyComponent = () => {
  const { data, error, loading } = useRequest(fetch, {
    url: "https://example.com/api/v1/users",
  });

  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;