Vue 利用指令實現(xiàn)禁止反復(fù)發(fā)送請求的兩種方法
前端做后臺管控系統(tǒng),在某些接口請求時間過長的場景下,需要防止用戶反復(fù)發(fā)起請求。
假設(shè)某場景下用戶點擊查詢按鈕后,后端響應(yīng)需要長時間才能返回數(shù)據(jù)。那么要規(guī)避用戶返回點擊查詢按鈕無外乎是讓用戶無法在合理時間內(nèi)再次點擊按鈕。實現(xiàn)方式也有好幾種:
1、在按鈕點擊發(fā)起請求后,彈個蒙層,顯示個loading,等請求數(shù)據(jù)返回了將蒙層隱藏掉。
2、在按鈕點擊發(fā)起請求后,將按鈕禁用掉,同樣等數(shù)據(jù)返回了將按鈕禁用解除。
以上是比較常見的2種方案。
實現(xiàn)上最簡單的肯定是在需要的頁面種在請求前和拿到數(shù)據(jù)后,單獨處理。這種方案優(yōu)點僅僅是簡單,但是每個需要處理的頁面都要單獨寫一串重復(fù)的代碼,哪怕利用mixin也要多不少冗余代碼。
如果是利用指令的方式僅僅需要在合適的地方加上個一條v-xxxx,其他都在指令的邏輯內(nèi)統(tǒng)一處理。
以第二種方式為例:
clickForbidden.js
let forbidClick = null; export default { bind(e) { const el = e; let timer = null; forbidClick = () => { el.disabled = true; el.classList.add('is-disabled'); timer = setTimeout(() => { el.disabled = false; el.classList.remove('is-disabled'); }, 3000); }; el.addEventListener('click', forbidClick); }, unbind() { document.removeEventListener('click', forbidClick); }, };
指令的邏輯很簡單,當(dāng)按鈕插入到DOM節(jié)點后,添加一個監(jiān)聽click的事件,當(dāng)按鈕點擊后,就將按鈕禁用,并加上一個禁用樣式,并在3s后將該按鈕解除禁用。
再考慮請求,以axios為例:
api.js
import axios from 'axios'; export baseURL = 'xxxx'; const api = axios.create({ baseURL,<br data-filtered="filtered"> timeout: 3000, }); /* 記錄當(dāng)前請求是否完成 */ window.currentResq = { done: true, config: {}, }; api.interceptors.request.use(function(config) { clearTimeout(resqTimer); window.currentResq = { done: false, config, }; // 接口請求時長超過3s,則視為完成,不管請求結(jié)果成功或失敗 resqTimer = setTimeout(() => { window.currentResq = { done: true, config: {}, }; }, 3000); }); api.interceptors.response.use(function(response) { const { config } = window.currentResq; const { url, method, data } = response.config; if (config.url === url && config.method === method && config.data === data) { clearTimeout(resqTimer); window.currentResq.done = true; } return response; }, function (error) { return error; }); export default api;
用一個全局的currentResq來作為請求是否完成的標(biāo)志。在axios請求攔截器種,將當(dāng)前請求的數(shù)據(jù)記錄在currentResq中,并將done設(shè)置為false。在axios響應(yīng)攔截器中,約定url,method,data3個參數(shù)一樣時,就是當(dāng)前currentResq中記錄的請求返回數(shù)據(jù),并將done設(shè)置為true。
同樣的在指令邏輯中加入一個輪詢監(jiān)聽currentResq的done是否完成。
clickForbidden.js
let forbidClick = null; export default { bind(e) { const el = e; let timer = null; forbidClick = () => { el.disabled = true; el.classList.add('is-disabled'); timer = setInterval(() => { if (window.currentResq.done) { clearInterval(timer); el.disabled = false; el.classList.remove('is-disabled'); } }, 500); }; el.addEventListener('click', forbidClick); }, unbind() { document.removeEventListener('click', forbidClick); }, };
這樣就實現(xiàn)了只要在按鈕上加上了v-clickForbidden
。按鈕點擊后就會被禁用,僅當(dāng)某個請求返回數(shù)據(jù)或者3s后將按鈕的禁用解除。
現(xiàn)在僅僅考慮按鈕一次僅發(fā)送了一個請求的場景,在currentResq中也可以用一個數(shù)據(jù)來記錄請求。
總結(jié)
以上所述是小給大家介紹的Vue 利用指令實現(xiàn)禁止反復(fù)發(fā)送請求的兩種方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
深入了解vue-router原理并實現(xiàn)一個小demo
這篇文章主要為大家詳細(xì)介紹了vue-router原理并實現(xiàn)一個小demo,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03Vue 2.5 Level E 發(fā)布了: 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中,我們將重點介紹一些更重要的的變化:更好的 TypeScript 集成,更好的錯誤處理,更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無關(guān)的服務(wù)端渲染2017-10-10vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作
這篇文章主要介紹了vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09