學(xué)習(xí)ahooks useRequest并實(shí)現(xiàn)手寫
更新時(shí)間：2023年03月09日 15:10:01 作者：馮心心愛(ài)吃肉
這篇文章主要為大家介紹了學(xué)習(xí)ahooks useRequest并實(shí)現(xiàn)手寫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前言
最近業(yè)務(wù)沒(méi)有之前緊張了，也是消失了一段時(shí)間，也總結(jié)了一些之前業(yè)務(wù)上的問(wèn)題。
和同事溝通也是發(fā)現(xiàn)普通的async + await + 封裝api在復(fù)雜業(yè)務(wù)場(chǎng)景下針對(duì)于請(qǐng)求的業(yè)務(wù)邏輯比較多，也是推薦我去學(xué)習(xí)一波ahooks，由于問(wèn)題起源于請(qǐng)求，因此作者也是直接從 useRequest 開始看起。
附ahooks useRequest鏈接:
實(shí)現(xiàn)
話不多說(shuō)，手寫直接開始，參考幾個(gè)比較常用的 useRequest 能力來(lái)一個(gè)個(gè)實(shí)現(xiàn)吧。
基礎(chǔ)版（雛形）
先上代碼：
useRequest.ts
interface UseRequestOptionsProps {
/*
* 請(qǐng)求參數(shù)
*/
initialData?: object;
/*
* 請(qǐng)求成功回調(diào)
*/
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業(yè)務(wù)邏輯
const request = async () => {
try {
const res = await requestFn(initialData);
setData(res);
// 請(qǐng)求成功響應(yīng)回調(diào)
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 對(duì)于請(qǐng)求函數(shù)的寫法并無(wú)過(guò)多要求，只要是一個(gè)異步function且返回一個(gè)promise對(duì)象，即可傳入useRequest的第一個(gè)參數(shù)中，而第二個(gè)參數(shù)則是一系列的可選配置項(xiàng)，雛形版本我們暫時(shí)只支持onSuccess。
手動(dòng)觸發(fā)
代碼改造后：
useRequest.ts
interface UseRequestOptionsProps {
/*
* 手動(dòng)開啟
*/
manual?: boolean;
/*
* 請(qǐng)求參數(shù)
*/
initialData?: object;
/*
* 請(qǐng)求成功回調(diào)
*/
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業(yè)務(wù)邏輯
const request = async () => {
try {
const res = await requestFn(initialData);
setData(res);
// 請(qǐng)求成功響應(yīng)回調(diào)
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();
手動(dòng)執(zhí)行的邏輯主要是根據(jù)manual參數(shù)砍掉useRequest mount階段的渲染請(qǐng)求，把執(zhí)行請(qǐng)求的能力暴露出去，在頁(yè)面中去手動(dòng)調(diào)用request()來(lái)觸發(fā)。
輪詢與手動(dòng)取消
代碼改造后：
useRequest.ts
interface UseRequestOptionsProps {
/*
* 手動(dòng)開啟
*/
manual?: boolean;
/*
* 請(qǐng)求參數(shù)
*/
initialData?: object;
/*
* 輪詢
*/
pollingInterval?: number | null;
/*
* 請(qǐng)求成功回調(diào)
*/
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業(yè)務(wù)邏輯
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);
// 請(qǐng)求成功響應(yīng)回調(diào)
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();
...
// 輪詢到理想數(shù)據(jù)后
cancel();
輪詢的支持在hook中主要用到了timer setTimeout的遞歸思路，同時(shí)給出一個(gè)status狀態(tài)值判斷是否在輪詢中，當(dāng)調(diào)用端執(zhí)行cancel()，status則為false；當(dāng)輪詢開始，則status為true。
而cancel()的能力 主要也是取消了timer的遞歸請(qǐng)求邏輯，并且輪詢的業(yè)務(wù)場(chǎng)景和manual: true配合很多。
依賴請(qǐng)求（串型請(qǐng)求）
代碼改造后：
useRequest.ts
interface UseRequestOptionsProps {
/*
* 手動(dòng)開啟
*/
manual?: boolean;
/*
* 請(qǐng)求參數(shù)
*/
initialData?: object;
/*
* 輪詢
*/
pollingInterval?: number | null;
/*
* 準(zhǔn)備，用于依賴請(qǐng)求
*/
ready?: boolean;
/*
* 請(qǐng)求成功回調(diào)
*/
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業(yè)務(wù)邏輯
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);
// 請(qǐng)求成功響應(yīng)回調(diào)
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);
},
},
);
依賴請(qǐng)求的思路就是在hook中加入一個(gè)ready字段，也是在基于manual一層的限制后又加了一層，來(lái)判斷是否在hook加載時(shí)是否做默認(rèn)請(qǐng)求，而當(dāng)option中的ready更新（為true）時(shí)，hook自動(dòng)更新從而發(fā)起請(qǐng)求。
常用于頁(yè)面中A請(qǐng)求完成后執(zhí)行B請(qǐng)求，B請(qǐng)求的ready字段依賴于A請(qǐng)求的data/loading字段。
防抖與節(jié)流
防抖和節(jié)流的實(shí)現(xiàn)比較簡(jiǎn)單，依賴于lodash庫(kù)，包裝了一下request函數(shù)的請(qǐng)求內(nèi)容。
代碼如下：
useRequest.ts
interface UseRequestOptionsProps {
/*
* 手動(dòng)開啟
*/
manual?: boolean;
/*
* 請(qǐng)求參數(shù)
*/
initialData?: object;
/*
* 輪詢
*/
pollingInterval?: number | null;
/*
* 準(zhǔn)備，用于依賴請(qǐng)求
*/
ready?: boolean;
/*
* 防抖
*/
debounceInterval?: number;
/*
* 節(jié)流
*/
throttleInterval?: number;
/*
* 請(qǐng)求成功回調(diào)
*/
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]);
// 請(qǐng)求
const request = () => {
if (debounceInterval) {
lodash.debounce(requestDoing, debounceInterval)();
} else if (throttleInterval) {
lodash.throttle(requestDoing, throttleInterval)();
} else {
requestDoing();
}
};
// useRequest業(yè)務(wù)邏輯
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);
// 請(qǐng)求成功響應(yīng)回調(diào)
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, // 節(jié)流
onSuccess: (res) => {
console.log('success request!', res);
},
},
);
for(let i = 0; i < 10000; i++) {
request();
}
在hook中，通過(guò)lodash.debounce/lodash.throttle來(lái)包裝request函數(shù)主體，通過(guò)option中的判斷來(lái)執(zhí)行對(duì)應(yīng)的包裝體函數(shù)。
緩存與依賴更新
改造后的代碼（最終代碼）如下：
useRequest.ts
import {
useState,
useEffect,
useRef,
SetStateAction,
useCallback,
} from 'react';
import lodash from 'lodash';
interface UseRequestOptionsProps {
/*
* 手動(dòng)開啟
*/
manual?: boolean;
/*
* 請(qǐng)求參數(shù)
*/
initialData?: object;
/*
* 輪詢
*/
pollingInterval?: number | null;
/*
* 準(zhǔn)備，用于依賴請(qǐng)求
*/
ready?: boolean;
/*
* 防抖
*/
debounceInterval?: number;
/*
* 節(jié)流
*/
throttleInterval?: number;
/*
* 延遲loading為true的時(shí)間
*/
loadingDelay?: number;
/*
* 依賴
*/
refreshDeps?: any[];
/*
* 請(qǐng)求成功回調(diào)
*/
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);
// 手動(dòng)觸發(fā)request
!manual && ready && request();
}, [manual, ready, ...(Array.isArray(refreshDeps) ? refreshDeps : [])]);
// 請(qǐng)求
const request = () => {
if (debounceInterval) {
lodash.debounce(requestDoing, debounceInterval)();
} else if (throttleInterval) {
lodash.throttle(requestDoing, throttleInterval)();
} else {
requestDoing();
}
};
// useRequest業(yè)務(wù)邏輯
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);
// 請(qǐng)求成功響應(yīng)回調(diào)
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, // 節(jié)流
refreshDeps: [mountLoading, updateLoading],
onSuccess: (res) => {
console.log('success request!', res);
},
},
);
緩存的主體思路是在useRequest中拿到第一次數(shù)據(jù)后通過(guò)useCallback來(lái)透出data依賴來(lái)保存，同時(shí)向外暴露一個(gè)cachedFetchData來(lái)過(guò)渡data從null到請(qǐng)求到接口數(shù)據(jù)的過(guò)程。
依賴更新的思路則是在頁(yè)面中給useRequest一系列依賴狀態(tài)一并加入在hook的請(qǐng)求副作用中，監(jiān)聽到頁(yè)面中依賴改變，則重新請(qǐng)求，具體實(shí)現(xiàn)則是refreshDeps參數(shù)。
結(jié)尾
花了一上午時(shí)間，一個(gè)簡(jiǎn)易版本的useRequest實(shí)現(xiàn)了，也是通過(guò)實(shí)現(xiàn)學(xué)習(xí)到了一些請(qǐng)求思路，在業(yè)務(wù)復(fù)雜的場(chǎng)景下也是很需要這類請(qǐng)求工具來(lái)讓開發(fā)者的注意力從請(qǐng)求處理轉(zhuǎn)移集中在業(yè)務(wù)邏輯中。
以上就是學(xué)習(xí)ahooks useRequest并實(shí)現(xiàn)手寫的詳細(xì)內(nèi)容，更多關(guān)于ahooks useRequest手寫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例
輪播組件是常見(jiàn)的一種方式,用來(lái)展示圖像、信息或者是廣告,本文就來(lái)介紹一下React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
React-router 4 按需加載的實(shí)現(xiàn)方式及原理詳解
本篇文章主要介紹了React-router 4 按需加載的實(shí)現(xiàn)方式及原理詳解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進(jìn)行綁定，實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
基于visual studio code + react 開發(fā)環(huán)境搭建過(guò)程
今天通過(guò)本文給大家分享基于visual studio code + react 開發(fā)環(huán)境搭建過(guò)程，本文給大家介紹的非常詳細(xì)，包括react安裝問(wèn)題及安裝 Debugger for Chrome的方法，需要的朋友跟隨小編一起看看吧2021-07-07
這篇文章主要介紹了React中的生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
React內(nèi)部實(shí)現(xiàn)cache方法示例詳解
這篇文章主要為大家介紹了React內(nèi)部實(shí)現(xiàn)cache方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了React傳值 組件傳值 之間的關(guān)系詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
在React中強(qiáng)制重新渲染的4 種方式案例代碼
這篇文章主要介紹了在React中強(qiáng)制重新渲染的4 種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
40行代碼把Vue3的響應(yīng)式集成進(jìn)React做狀態(tài)管理
這篇文章主要介紹了40行代碼把Vue3的響應(yīng)式集成進(jìn)React做狀態(tài)管理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家介紹了React中classnames庫(kù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10