Question

我正在尝试创建一个可重用的自定义挂钩 (useRequest)，我可以在其中使用 axios 获取数据、显示它并具有加载状态。如果出现错误，我希望它被 useRequest 捕获。我无法捕获最终错误并将 axios 请求传递给 useRequest。目前我只为错误消息获取空值。

编辑：我使用生成的 api，它使用 axios。所以为了让我的 fetch 请求看起来像这样：

import {GeneratedApi} from '/generatedApi'

const generatedApi = new GeneratedApi(configuration) //configuration is for editing the headers etc.
const response = await generatedApi.getData();
setData(response.data);

我的代码：

import axios, { AxiosResponse } from "axios";
import { useEffect, useState } from "react";

const useRequest = (promise: Promise<AxiosResponse<any>>) => {
  const [loading, setLoading] = useState<boolean>(true);

  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setError(null);
        await promise;
        setLoading(false);
        setError(null);
      } catch (error) {
        setLoading(false);
        setError("Error: " + JSON.stringify(error));
      }
    };
    fetchData();
  }, [promise]);

  return [loading, error];
};

export default function App() {
  const [data, setData] = useState<any | null>(null);

  const [loading, error] = useRequest(async () => {

    const response = await axios.get("https://jsonplaceholder.typicode.com/todos");
    setData(response.data);
    return response;
  });

  if (loading) {
    return <p>Loading ...</p>;
  } else if (data) {
    return <p>{data}</p>;
  } else {
    return <p>Error: {error}</p>;
  }
}

Answer 1

您可以传递一个包含在 useCallback 钩子中的函数，该函数将调用您的 api 调用：

import axios, { AxiosResponse } from "axios";
import { useCallback, useEffect, useState } from "react";

const url = "https://jsonplaceholder.typicode.com/todos"

const useRequest = (apiCall: () => Promise<AxiosResponse<any>>, setData: (data: any) => void) => {
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setError(null);
        const response = await apiCall()
        setData(response.data)
        setLoading(false);
        setError(null);
      } catch (error) {
        setLoading(false);
        setData(null)
        setError("Error: " + JSON.stringify(error));
      }
    };
    fetchData();
  }, [apiCall, setData]);

  return [loading, error];
};

export default function App() {
  const [data, setData] = useState<any | null>(null);
  const fun = useCallback(() => axios.get(url), [])

  const [loading, error] = useRequest(fun, setData);

  if (loading) {
    return <p>Loading ...</p>;
  } else if (data) {
    return <p>{'data'}</p>;
  } else {
    return <p>Error: {error}</p>;
  }
}

Answer 2

Konstantin Samarin 的回答帮助我指明了正确的方向。

我当前的解决方案缺少依赖项（回调），可能并不理想。添加依赖项会导致无限重新渲染。

import axios, { AxiosResponse } from "axios";
import { useCallback, useEffect, useState } from "react";

interface RequestReponse {
    loading: boolean,
    error: string | null
}

function useRequest(callback: any, dependencies: any[]): [boolean, (string | null)] {
    const [loading, setLoading] = useState<boolean>(true);

    const [error, setError] = useState<string | null>(null);

    const navigate = useNavigate();

    useEffect(() => {
        async function doRequest() {
            try {
                setError(null);
                await callback();
                setLoading(false);
            } catch (error) {
                setLoading(false);
                setError(error)
            }
        }

        doRequest();
    }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps

    return [loading, error];
}

export default function App() {

  const generatedApi = new GeneratedApi();

  const [data, setData] = useState<any | null>(null);

  const {loading, error} = useRequest(async () => {
    const response = await generatedApi.getData();
    setData(() => (response.data);
}, [])

  if (loading) {
    return <p>Loading ...</p>;
  } else if (data) {
    return <p>{'data'}</p>;
  } else {
    return <p>Error: {error}</p>;
  }
}

自定义钩子来执行 axios 请求 [React, Typescript]

2 个答案: