Vue中Axios中取消請求及阻止重復(fù)請求的方法
阻止請求目的:
為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時間內(nèi)重復(fù)進(jìn)行接口請求,從而導(dǎo)致前端向后端重復(fù)發(fā)送多次請求。
常見情況:
PC端:輸入框搜素,多次請求接口移動端:移動端很容易造成誤操作或多操作請求(移動端沒有點(diǎn)擊延遲)
注意:有Loading遮罩時也有可能發(fā)生重復(fù)請求
新建 axios.js 文件
import axios from "axios"; // import router from "../js/router"; // import { Message } from "element-ui"; /** * @description 函數(shù)返回唯一的請求key **/ function getRequestKey(config) { let { method, url, params, data } = config; // axios中取消請求及阻止重復(fù)請求的方法 // 參數(shù)相同時阻止重復(fù)請求: // return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&"); // 請求方法相同,參數(shù)不同時阻止重復(fù)請求 return [method, url].join("&"); } /** * @description 添加請求信息 **/ let pendingRequest = new Map(); function addPendingRequest(config) { // console.log(config.url) let requestKey = getRequestKey(config); config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => { if (!pendingRequest.has(requestKey)) { pendingRequest.set(requestKey, cancel); } }); } /** * @description 取消重復(fù)請求 **/ function removePendingRequest(config) { let requestKey = getRequestKey(config); if (pendingRequest.has(requestKey)) { // 如果是重復(fù)的請求,則執(zhí)行對應(yīng)的cancel函數(shù) let cancel = pendingRequest.get(requestKey); cancel(requestKey); // 將前一次重復(fù)的請求移除 pendingRequest.delete(requestKey); } } /** * @description 請求攔截器 **/ axios.interceptors.request.use( function (config) { // 檢查是否存在重復(fù)請求,若存在則取消已發(fā)的請求 removePendingRequest(config); // 把當(dāng)前請求信息添加到pendingRequest對象中 addPendingRequest(config); return config; }, function (error) { return Promise.reject(error); } ); /** * @description 響應(yīng)攔截器 **/ axios.interceptors.response.use( function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 removePendingRequest(response.config); // 該方法是項(xiàng)目中用到 // if (response.data.message == "您沒有獲得授權(quán)") { // Message({ // type: "warning", // message: "您沒有獲得授權(quán),請重新登錄", // }); // localStorage.removeItem('token'); // localStorage.removeItem('data'); // router.push({ // name: "login", // }); // } return response; }, function (error) { // 從pendingRequest對象中移除請求 removePendingRequest(error.config || {}); if (axios.isCancel(error)) { console.log("被取消的重復(fù)請求:" + error.message); } return Promise.reject(error); } ); export default axios
全局 main.js 引入
import Vue from "vue"; import axios from "./until/axios"; Vue.prototype.$axios = axios;
到此這篇關(guān)于Vue中Axios中取消請求及阻止重復(fù)請求的方法的文章就介紹到這了,更多相關(guān)Axios取消請求及阻止重復(fù)請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+element?ui表格添加多個搜索條件篩選功能(前端查詢)
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時,遇到了搜索框功能的實(shí)現(xiàn)問題,需要的朋友可以參考下2023-08-08Vue移動端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-12-12vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解(部分校驗(yàn),全部校驗(yàn))
validate()可以指定校驗(yàn)范圍內(nèi),或者是全局的 字段。而validateAll()只能校驗(yàn)全局。這篇文章主要介紹了vue+VeeValidate 校驗(yàn)范圍(部分校驗(yàn),全部校驗(yàn)) ,需要的朋友可以參考下2018-10-10