Question

我正在使用React和react-hooks开发一个项目。我试图在后端返回响应后调用方法。目前，我正在使用Axios-hooks库来进行调用：

export const useDataFromServer = (dataObjectId) => {
    return useAxios(
        {
            url: `/data/${dataObjectId}`,
            method: 'GET',
        },
        {
            manual: manual,
        }
    );
}

我正在尝试实现自己的钩子来包装useAxios调用，因为在useAxios文档中找不到任何方法：https://www.npmjs.com/package/axios-hooks：

export function useAxiosWithResponseCallback(config, options, callback) {
    const [isCallbackCalled, setIsCallbackCalled] = useState(false);
    const [axiosState, execute] = useAxios(config, options);

    useEffect(()=>{
        if (axiosState.loading) {
            setIsCallbackCalled(false);
        } else {
            if (!isCallbackCalled) {
                if (callback && typeof callback == 'function') {
                    callback([axiosState, execute]);
                }
                setIsCallbackCalled(true);
            }
        }
    }, [
        axiosState,
        isCallbackCalled,
        callback,
    ]);

    return [
        axiosState,
        execute,
    ];
}

但是我不确定它是否在所有情况下都可以使用。

任何帮助都将不胜感激！

Answer 1

useAxios基于Promise。

 const [{}, yourRequest] = useAxios(
    {
      ...AXIOS_CONFIG
    },
    { manual: true }
  )

然后您完成

yourRequest(yourData).then(here is your callback)

Answer 2

以下是示例，可能会对您有所帮助。

function App() {
  const [{ data: getData, loading: getLoading, error: getError }] = useAxios(
    'https://reqres.in/api/users/1?delay=1'
  )

  const [
    { data: putData, loading: putLoading, error: putError },
    executePut
  ] = useAxios(
    {
      url: 'https://reqres.in/api/users/1',
      method: 'PUT'
    },
    { manual: true }
  )

  function updateData() {
    executePut({
      data: {
        ...getData,
        updatedAt: new Date().toISOString()
      }
    })
  }

  if (getLoading || putLoading) return <p>Loading...</p>
  if (getError || putError) return <p>Error!</p>

  return (
    <div>
      <button onClick={updateData}>update data</button>
      <pre>{JSON.stringify(putData || getData, null, 2)}</pre>
    </div>
  )
}

使用useAxios挂钩获取数据后，如何调用方法

2 个答案: