这篇文章主要介绍“ahooks useRequest怎么使用”，在日常操作中，相信很多人在ahooks useRequest怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ahooks useRequest怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
基础版（雏形）
先上代码：
useRequest.ts
interface UseRequestOptionsProps { initialData?: object; onSuccess?: (res: any) => void;}const useRequest = ( requestFn: ( initialData?: object | string | [], ) => Promise<SetStateAction<any>>, options: UseRequestOptionsProps,) => { const [data, setData] = useState<SetStateAction<any>>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const { initialData, onSuccess } = options; useEffect(() => { setLoading(true); setError(null); setData(null); request(); }, [requestFn]); // useRequest业务逻辑 const request = async () => { try { const res = await requestFn(initialData); setData(res); // 请求成功响应回调 onSuccess && onSuccess(res); } catch (err) { err && setError(JSON.stringify(err)); } finally { setLoading(false); } }; return { data, loading, error };};export default useRequest;使用
const { data, loading, error } = useRequest( queryCompensatoryOrderSituation, { initialData: { compensatoryId, } onSuccess: (res) => { console.log('success request!', res); }, },);useRequest 对于请求函数的写法并无过多要求，只要是一个异步function且返回一个promise对象，即可传入useRequest的第一个参数中，而第二个参数则是一系列的可选配置项，雏形版本我们暂时只支持onSuccess。
手动触发
代码改造后：
useRequest.ts
interface UseRequestOptionsProps { manual?: boolean; initialData?: object; onSuccess?: (res: any) => void;}const useRequest = ( requestFn: ( initialData?: object | string | [], ) => Promise<SetStateAction<any>>, options: UseRequestOptionsProps,) => { const [data, setData] = useState<SetStateAction<any>>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const { manual, initialData, onSuccess } = options; useEffect(() => { setLoading(true); setError(null); setData(null); !manual && request(); }, [manual]); // useRequest业务逻辑 const request = async () => { try { const res = await requestFn(initialData); setData(res); // 请求成功响应回调 onSuccess && onSuccess(res); } catch (err) { err && setError(JSON.stringify(err)); } finally { setLoading(false); } }; return { data, loading, error, request };};export default useRequest;使用
const { data, loading, error, request } = useRequest( queryCompensatoryOrderSituation, { manual: true, initialData: { compensatoryId, }, onSuccess: (res) => { console.log('success request!', res); }, },);request();手动执行的逻辑主要是根据manual参数砍掉useRequest mount阶段的渲染请求，把执行请求的能力暴露出去，在页面中去手动调用request()来触发。
轮询与手动取消
代码改造后：
useRequest.ts
interface UseRequestOptionsProps { manual?: boolean; initialData?: object; pollingInterval?: number | null; onSuccess?: (res: any) => void;}const useRequest = ( requestFn: ( initialData?: object | string | [], ) => Promise<SetStateAction<any>>, options: UseRequestOptionsProps,) => { const [data, setData] = useState<SetStateAction<any>>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const status = useRef<boolean>(false); const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null); const { manual, initialData, pollingInterval, onSuccess } = options; useEffect(() => { setLoading(true); setError(null); setData(null); !manual && request(); }, [manual]); // useRequest业务逻辑 const request = async () => { try { !status.current && (status.current = true); if (pollingInterval && status.current) { pollingIntervalTimer.current = setTimeout(() => { status.current && request(); }, pollingInterval); } const res = await requestFn(initialData); setData(res); // 请求成功响应回调 onSuccess && onSuccess(res); } catch (err) { err && setError(JSON.stringify(err)); } finally { setLoading(false); } }; return { data, loading, error, request, cancel };};// 取消const cancel = () => { if (pollingIntervalTimer.current) { clearTimeout(pollingIntervalTimer.current); pollingIntervalTimer.current = null; status.current && (status.current = false); }};export default useRequest;使用
const { data, loading, error, request, cancel } = useRequest( queryCompensatoryOrderSituation, { manual: true, initialData: { compensatoryId, }, pollingInterval: 1000, onSuccess: (res) => { console.log('success request!', res); }, },);request();...// 轮询到理想数据后cancel();轮询的支持在hook中主要用到了timer setTimeout的递归思路，同时给出一个status状态值判断是否在轮询中，当调用端执行cancel()，status则为false；当轮询开始，则status为true。
而cancel()的能力 主要也是取消了timer的递归请求逻辑，并且轮询的业务场景和manual: true配合很多。
依赖请求（串型请求）
代码改造后：
useRequest.ts
interface UseRequestOptionsProps { manual?: boolean; initialData?: object; pollingInterval?: number | null; ready?: boolean; onSuccess?: (res: any) => void;}const useRequest = ( requestFn: ( initialData?: object | string | [], ) => Promise<SetStateAction<any>>, options: UseRequestOptionsProps,) => { const [data, setData] = useState<SetStateAction<any>>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const status = useRef<boolean>(false); const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null); const { manual, initialData, pollingInterval, ready = true, onSuccess, } = options; useEffect(() => { setLoading(true); setError(null); setData(null); !manual && ready && request(); }, [manual, ready]); // useRequest业务逻辑 const request = async () => { try { !status.current && (status.current = true); if (pollingInterval && status.current) { pollingIntervalTimer.current = setTimeout(() => { status.current && request(); }, pollingInterval); } const res = await requestFn(initialData); setData(res); // 请求成功响应回调 onSuccess && onSuccess(res); } catch (err) { err && setError(JSON.stringify(err)); } finally { setLoading(false); } }; return { data, loading, error, request, cancel };};// 取消const cancel = () => { if (pollingIntervalTimer.current) { clearTimeout(pollingIntervalTimer.current); pollingIntervalTimer.current = null; status.current && (status.current = false); }};export default useRequest;使用
const [mountLoading, setMountLoading] = useState<boolean>(false);useEffect(() => { setMountLoading(true);}, [2000])const { data, loading, error, request, cancel } = useRequest( queryCompensatoryOrderSituation, { initialData: { compensatoryId, }, pollingInterval: 1000, ready: mountLoading, onSuccess: (res) => { console.log('success request!', res); }, },);依赖请求的思路就是在hook中加入一个ready字段，也是在基于manual一层的限制后又加了一层，来判断是否在hook加载时是否做默认请求，而当option中的ready更新（为true）时，hook自动更新从而发起请求。
常用于页面中A请求完成后执行B请求，B请求的ready字段依赖于A请求的data/loading字段。
防抖与节流
防抖和节流的实现比较简单，依赖于lodash库，包装了一下request函数的请求内容。
代码如下：
useRequest.ts
interface UseRequestOptionsProps { manual?: boolean; initialData?: object; pollingInterval?: number | null; ready?: boolean; debounceInterval?: number; throttleInterval?: number; onSuccess?: (res: any) => void;}const useRequest = ( requestFn: ( initialData?: object | string | [], ) => Promise<SetStateAction<any>>, options: UseRequestOptionsProps,) => { const [data, setData] = useState<SetStateAction<any>>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const status = useRef<boolean>(false); const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null); const { manual, initialData, pollingInterval, ready = true, debounceInterval, throttleInterval onSuccess, } = options; useEffect(() => { setLoading(true); setError(null); setData(null); !manual && ready && request(); }, [manual, ready]); // 请求 const request = () => { if (debounceInterval) { lodash.debounce(requestDoing, debounceInterval)(); } else if (throttleInterval) { lodash.throttle(requestDoing, throttleInterval)(); } else { requestDoing(); }};// useRequest业务逻辑const requestDoing = async () => { try { !status.current && (status.current = true); if (pollingInterval && status.current) { pollingIntervalTimer.current = setTimeout(() => { status.current && request(); }, pollingInterval); } const res = await requestFn(initialData); setData(res); // 请求成功响应回调 onSuccess && onSuccess(res); } catch (err) { err && setError(JSON.stringify(err)); } finally { setLoading(false); }};// 取消const cancel = () => { if (pollingIntervalTimer.current) { clearTimeout(pollingIntervalTimer.current); pollingIntervalTimer.current = null; status.current && (status.current = false); }};export default useRequest;使用
const { data, loading, error, request, cancel } = useRequest( queryCompensatoryOrderSituation, { manual: true, initialData: { compensatoryId, }, debounceInterval: 1000, // 防抖 throttleInterval: 1000, // 节流 onSuccess: (res) => { console.log('success request!', res); }, },);for(let i = 0; i < 10000; i++) { request();}在hook中，通过lodash.debounce/lodash.throttle来包装request函数主体，通过option中的判断来执行对应的包装体函数。
缓存与依赖更新
改造后的代码（最终代码）如下：
useRequest.ts
import { useState, useEffect, useRef, SetStateAction, useCallback,} from 'react';import lodash from 'lodash';interface UseRequestOptionsProps { manual?: boolean; initialData?: object; pollingInterval?: number | null; ready?: boolean; debounceInterval?: number; throttleInterval?: number; loadingDelay?: number; refreshDeps?: any[]; onSuccess?: (res: any) => void;}const useRequest = ( requestFn: ( initialData?: object | string | [], ) => Promise<SetStateAction<any>>, options: UseRequestOptionsProps,) => { const [data, setData] = useState<SetStateAction<any>>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const status = useRef<boolean>(false); const pollingIntervalTimer = useRef<NodeJS.Timer | null>(null); const { manual, initialData, pollingInterval, ready = true, debounceInterval, throttleInterval, loadingDelay, refreshDeps, onSuccess, } = options; useEffect(() => { if (loadingDelay) { setTimeout(() => { status && setLoading(true); }, loadingDelay); } setError(null); setData(null); // 手动触发request !manual && ready && request(); }, [manual, ready, ...(Array.isArray(refreshDeps) ? refreshDeps : [])]); // 请求 const request = () => { if (debounceInterval) { lodash.debounce(requestDoing, debounceInterval)(); } else if (throttleInterval) { lodash.throttle(requestDoing, throttleInterval)(); } else { requestDoing(); } }; // useRequest业务逻辑 const requestDoing = async () => { try { !status.current && (status.current = true); if (pollingInterval && status.current) { pollingIntervalTimer.current = setTimeout(() => { status.current && request(); }, pollingInterval); } const res = await requestFn(initialData); setData(res); // 请求成功响应回调 onSuccess && onSuccess(res); } catch (err) { err && setError(JSON.stringify(err)); } finally { setLoading(false); } }; // 取消 const cancel = () => { if (pollingIntervalTimer.current) { clearTimeout(pollingIntervalTimer.current); pollingIntervalTimer.current = null; status.current && (status.current = false); } }; // 缓存 const cachedFetchData = useCallback(() => data, [data]); return { data, loading, error, request, cancel, cachedFetchData };};export default useRequest;使用
const [mountLoading, setMountLoading] = useState<boolean>(false);const [updateLoading, setUpdateLoading] = useState<boolean>(false);setTimeout(() => { setMountLoading(true);}, 1000);setTimeout(() => { setUpdateLoading(true);}, 2000);const { data, loading, error, request, cancel, cachedFetchData } = useRequest( queryCompensatoryOrderSituation, { manual: true, initialData: { compensatoryId, }, debounceInterval: 1000, // 防抖 throttleInterval: 1000, // 节流 refreshDeps: [mountLoading, updateLoading], onSuccess: (res) => { console.log('success request!', res); }, },);缓存的主体思路是在useRequest中拿到第一次数据后通过useCallback来透出data依赖来保存，同时向外暴露一个cachedFetchData来过渡data从null到请求到接口数据的过程。
依赖更新的思路则是在页面中给useRequest一系列依赖状态一并加入在hook的请求副作用中，监听到页面中依赖改变，则重新请求，具体实现则是refreshDeps参数。
到此，关于“ahooks useRequest怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
