用ahooks如何解決用戶多次提交方法？

3403771864 發(fā)布于2022-11-05 17:04 / 500人閱讀

　　在項目開發(fā)中，要求可以實現(xiàn)客戶多次提交，這樣的要求如何實現(xiàn)？

　　實現(xiàn)方法很多，比如添加 loading，在第一次點擊之后就無法再次點擊。另外一種方法就是給請求異步函數(shù)添加上一個靜態(tài)鎖，防止并發(fā)產(chǎn)生。這就是 ahooks 的 useLockFn 做的事情。

　　useLockFn

　　useLockFn用于給一個異步函數(shù)增加競態(tài)鎖，防止并發(fā)執(zhí)行。

　　它的源碼比較簡單，如下所示：

　　import { useRef, useCallback } from 'react';
　　// 用于給一個異步函數(shù)增加競態(tài)鎖，防止并發(fā)執(zhí)行。
　　function useLockFn<P extends any[] = any[], V extends any = any>(fn: (...args: P) => Promise<V>) {
　　// 是否現(xiàn)在處于一個鎖中
　　const lockRef = useRef(false);
　　// 返回的是增加了競態(tài)鎖的函數(shù)
　　return useCallback(
　　async (...args: P) => {
　　// 判斷請求是否正在進(jìn)行
　　if (lockRef.current) return;
　　// 請求中
　　lockRef.current = true;
　　try {
　　// 執(zhí)行原有請求
　　const ret = await fn(...args);
　　// 請求完成，狀態(tài)鎖設(shè)置為 false
　　lockRef.current = false;
　　return ret;
　　} catch (e) {
　　// 請求失敗，狀態(tài)鎖設(shè)置為 false
　　lockRef.current = false;
　　throw e;
　　}
　　},
　　[fn],
　　);
　　}
　　export default useLockFn;

　　這里的入?yún)⑹钱惒胶瘮?shù)，返回的是一個增加了競態(tài)鎖的函數(shù)。通過 lockRef 做一個標(biāo)識位，初始化的時候它的值為 false。當(dāng)正在請求，則設(shè)置為 true，可以影響下次再調(diào)用這個函數(shù)的時候，就直接 return，不執(zhí)行原函數(shù)，從而達(dá)到加鎖的目的。

　　缺點

　　就雜每一個需要添加競態(tài)鎖的請求異步函數(shù)都手動加一遍。那如何解決？

　　答案是可以通過 axios 自動取消重復(fù)請求。

　　axios 自動取消重復(fù)請求

　　axios 取消請求

　　對于原生的 XMLHttpRequest 對象發(fā)起的 HTTP 請求，可以調(diào)用 XMLHttpRequest 對象的 abort 方法。

　　那么我們項目中常用的 axios 呢？它其實底層也是用的 XMLHttpRequest 對象，它對外暴露取消請求的 API 是 CancelToken?？梢允褂萌缦拢骸?/p>

　const CancelToken = axios.CancelToken;
　　const source = CancelToken.source();
　　axios.post('/user/12345', {
　　name: 'gopal'
　　}, {
　　cancelToken: source.token
　　})
　　source.cancel('Operation canceled by the user.'); // 取消請求，參數(shù)是可選的

　　另外一種使用的方法是調(diào)用 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建 CancelToken，具體使用如下：

　const CancelToken = axios.CancelToken;
　　let cancel;
　　axios.get('/user/12345', {
　　cancelToken: new CancelToken(function executor(c) {
　　cancel = c;
　　})
　　});
　　cancel(); // 取消請求

　　如何自動取消重復(fù)的請求

　　怎么實現(xiàn)自動取消呢？答案是通過 axios 的攔截器。

　　請求攔截器：該類攔截器的作用是在請求發(fā)送前統(tǒng)一執(zhí)行某些操作，比如在請求頭中添加 token 相關(guān)的字段。

　　響應(yīng)攔截器：該類攔截器的作用是在接收到服務(wù)器響應(yīng)后統(tǒng)一執(zhí)行某些操作，比如發(fā)現(xiàn)響應(yīng)狀態(tài)碼為 401 時，自動跳轉(zhuǎn)到登錄頁。

　　就看看做到方法：

　　第一步，定義幾個重要的輔助函數(shù)。

　　generateReqKey：用于根據(jù)當(dāng)前請求的信息，生成請求 Key。只有 key 相同才會判定為是重復(fù)請求。這一點很重要，而且可能跟具體的業(yè)務(wù)場景有關(guān)，比如有一種請求，輸入框模糊搜索，用戶高頻輸入關(guān)鍵字，一次性發(fā)出多個請求，可能先發(fā)出的請求，最后才響應(yīng)，導(dǎo)致實際搜索結(jié)果與預(yù)期不符。這種其實就只需要根據(jù) URL 和請求方法判定其為重復(fù)請求，然后取消之前的請求就可以了。

　　這里我認(rèn)為，如果有需要的話，可以暴露一個 API 給開發(fā)者進(jìn)行自定義重復(fù)的規(guī)則。這里我們先根據(jù)請求方法、url、以及參數(shù)生成唯一的 key 去做。

　　function generateReqKey(config) {
　　const { method, url, params, data } = config;
　　return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
　　}

　　addPendingRequest。用于把當(dāng)前請求信息添加到 pendingRequest 對象中。　

　const pendingRequest = new Map();
　　function addPendingRequest(config) {
　　const requestKey = generateReqKey(config);
　　config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
　　if (!pendingRequest.has(requestKey)) {
　　pendingRequest.set(requestKey, cancel);
　　}
　　});
　　}

　　removePendingRequest。檢查是否存在重復(fù)請求，若存在則取消已發(fā)的請求。

　　function removePendingRequest(config) {
　　const requestKey = generateReqKey(config);
　　if (pendingRequest.has(requestKey)) {
　　const cancelToken = pendingRequest.get(requestKey);
　　cancelToken(requestKey);
　　pendingRequest.delete(requestKey);
　　}
　　}

　　第二步，添加請求攔截器。

　　　axios.interceptors.request.use(
　　function (config) {
　　removePendingRequest(config); // 檢查是否存在重復(fù)請求，若存在則取消已發(fā)的請求
　　addPendingRequest(config); // 把當(dāng)前請求信息添加到pendingRequest對象中
　　return config;
　　},
　　(error) => {
　　return Promise.reject(error);
　　}
　　);

　　第二步，添加響應(yīng)攔截器。

　　axios.interceptors.response.use(
　　(response) => {
　　removePendingRequest(response.config); // 從pendingRequest對象中移除請求
　　return response;
　　},
　　(error) => {
　　removePendingRequest(error.config || {}); // 從pendingRequest對象中移除請求
　　if (axios.isCancel(error)) {
　　console.log("已取消的重復(fù)請求：" + error.message);
　　} else {
　　// 添加異常處理
　　}
　　return Promise.reject(error);
　　}
　　);

　　到這里就可以通過 axios 完成了自動取消重復(fù)請求的功能。

　　思考與總結(jié)

　　useLockFn 也可以讓 hook或方法給請求函數(shù)添加競態(tài)鎖的方式解決重復(fù)請求的問題?？蛇@個很需要依賴于開發(fā)者的習(xí)慣，假如沒有一些規(guī)則的約束，很難避免問題。

　　我們在通過 axios 攔截器以及其 CancelToken 功能，這樣就能夠在攔截器中自動將已發(fā)的請求取消，其實我們也要注意的是有一些接口就是需要重復(fù)發(fā)送請求，可以考慮加一下白名單功能，讓請求不進(jìn)行取消。

GPU云服務(wù)器云服務(wù)器按鈕多次提交 js用定時器多次調(diào)用 php提交表單方法 php提交數(shù)據(jù)方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128257.html

發(fā)表評論

登陸后可評論

0條評論

3403771864

男|高級講師

我要關(guān)注我要私信

TA的文章

匯總有關(guān)JS對象的創(chuàng)建與繼承

閱讀 566·2023-03-27 18:33
小程序有關(guān)手寫板簽名具體代碼

閱讀 755·2023-03-26 17:27
剖析Vue3中偵聽器watch的使用教程

閱讀 656·2023-03-26 17:14
JavaScript取消請求有哪些方法

閱讀 608·2023-03-17 21:13
解析React SSR 中的限流案例

閱讀 541·2023-03-17 08:28
解析微信小程序如何實現(xiàn)日期范圍選擇

閱讀 1829·2023-02-27 22:32
講解Web Components實現(xiàn)類Element UI中的Card卡片

閱讀 1324·2023-02-27 22:27
JavaScript使用export和import的兩個報錯如何解決

閱讀 2207·2023-01-20 08:28

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用ahooks如何解決用戶多次提交方法？

相關(guān)文章

ahooks正式發(fā)布React Hooks工具庫

**關(guān)于ahooks封裝cookie localStorage sessionStorage方法**

**解析ahooks整體架構(gòu)及React工具庫源碼**

**詳解ahooks解決React閉包問題方法**

Java與groovy混編 —— 一種兼顧接口清晰和實現(xiàn)敏捷的開發(fā)方式

發(fā)表評論

0條評論

3403771864

男|高級講師

TA的文章

匯總有關(guān)JS對象的創(chuàng)建與繼承

小程序有關(guān)手寫板簽名具體代碼

剖析Vue3中偵聽器watch的使用教程

JavaScript取消請求有哪些方法

解析React SSR 中的限流案例

解析微信小程序如何實現(xiàn)日期范圍選擇

講解Web Components實現(xiàn)類Element UI中的Card卡片

JavaScript使用export和import的兩個報錯如何解決

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用ahooks如何解決用戶多次提交方法？

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用ahooks如何解決用戶多次提交方法？