在react中自定义useAxios钩子

我正在使用 axios 和 React，所以我想为此编写一个自定义钩子，我这样做了，它工作正常，如下所示

  const useAxios = () => {
  const [response, setResponse] = useState([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true); //different!
  const [controller, setController] = useState();

  const axiosFetch = async (configObj) => {
    const { axiosInstance, method, url, requestConfig = {} } = configObj;

    try {
      const ctrl = new AbortController();
      setController(ctrl);
      const res = await axiosInstance[method.toLowerCase()](url, {
        ...requestConfig,
      });

      setResponse(res.data);
    } catch (err) {
      console.log(err.message);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    console.log(controller);

    // useEffect cleanup function
    return () => controller && controller.abort();
  }, [controller]);

  return [response, error, loading, axiosFetch];
};

我还创建了一个 axiosInstance 来传递 BASE_URL 和标头。 现在调用 useAxios 从 api 获取数据，如下所示

  const [data, error, loading, axiosFetch] = useAxios();
  const getData = () => {
    axiosFetch({
      axiosInstance: axios,
      method: "GET",
      url: "/url",
    });
  };
  useEffect(() => {
    getData();
  }, []);

我的问题是

• 当我需要调用一个 api 时，我正在执行上面的操作。
• 但是如果我必须在一个页面中调用三个或四个 API 该怎么办？
• 我可以像这样复制代码吗const [data1, error1, loading1, axiosFetch]=useAxios();
• 或者有没有其他方法可以最小化代码。

编辑/更新

我运行上面的代码来获取数据/url，如果我想打不同的怎么办route要从服务器获取更多数据以进行其他工作，基本 url 保持不变

所以如果第二条路线是/users

  const [data, error, loading, axiosFetch] = useAxios();
  const getUsers = () => {
    axiosFetch({
      axiosInstance: axios,
      method: "GET",
      url: "/users",
    });
  };
  useEffect(() => {
    getUsers();
  }, [on_BTN_Click]);

上面的代码我想在同一个文件中运行，一个用于获取数据，一个用于获取用户，我应该如何编写我的 axios，因为我认为这个const [data, error, loading, axiosFetch] = useAxios();应该只被调用一次，不知道如何执行此操作或什么是正确的方法，我是否需要更改我的useAxios hook?

您可以做的是将端点传递给挂钩或正确调用axiosFetch具有不同端点的回调。但我对你想要做的事情有另一种看法，这是我的 5 美分，说明为什么这个“axios hook”可能不是一个好主意。

关于 React Hooks 的一个好的经验法则是，如果您需要封装使用 React Hooks 的组件逻辑，请使用自定义钩子。

中描述的另一件重要的事情React Hooks 文档 https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook is:

自定义 Hook 是一种重用状态逻辑的机制（例如设置订阅并记住当前值），但每次使用自定义 Hook 时，其中的所有状态和效果都是完全隔离的。

因此，最终，如果两个不同的组件调用同一端点的获取，它们都将执行对后端的调用。如何预防呢？好吧，你可以使用一个库，例如反应查询 https://react-query-v3.tanstack.com/，这会为您创建某种“缓存”（以及许多其他不错的功能！）

最后但并非最不重要的一点是：API 调用与Service/Module作为一个概念，它比 React Hook（隔离组件逻辑）更重要。我很难建议您创建一个服务来进行 API 调用并在您的钩子中使用该服务，而不是将该逻辑耦合到您的钩子并必须处理各种问题，例如缓存和同一钩子的多个实例，甚至该钩子调用的多个实例多个不同的端点最终可以或不可以依赖于它们自己。