Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
阻止請(qǐng)求目的:
為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時(shí)間內(nèi)重復(fù)進(jìn)行接口請(qǐng)求,從而導(dǎo)致前端向后端重復(fù)發(fā)送多次請(qǐng)求。
常見情況:
PC端:輸入框搜素,多次請(qǐng)求接口移動(dòng)端:移動(dòng)端很容易造成誤操作或多操作請(qǐng)求(移動(dòng)端沒(méi)有點(diǎn)擊延遲)
注意:有Loading遮罩時(shí)也有可能發(fā)生重復(fù)請(qǐng)求
新建 axios.js 文件

import axios from "axios";
// import router from "../js/router";
// import { Message } from "element-ui";
/**
* @description 函數(shù)返回唯一的請(qǐng)求key **/
function getRequestKey(config) {
let {
method,
url,
params,
data
} = config;
// axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
// 參數(shù)相同時(shí)阻止重復(fù)請(qǐng)求:
// return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");
// 請(qǐng)求方法相同,參數(shù)不同時(shí)阻止重復(fù)請(qǐng)求
return [method, url].join("&");
}
/**
* @description 添加請(qǐng)求信息 **/
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ù)請(qǐng)求 **/
function removePendingRequest(config) {
let requestKey = getRequestKey(config);
if (pendingRequest.has(requestKey)) {
// 如果是重復(fù)的請(qǐng)求,則執(zhí)行對(duì)應(yīng)的cancel函數(shù)
let cancel = pendingRequest.get(requestKey);
cancel(requestKey);
// 將前一次重復(fù)的請(qǐng)求移除
pendingRequest.delete(requestKey);
}
}
/**
* @description 請(qǐng)求攔截器 **/
axios.interceptors.request.use(
function (config) {
// 檢查是否存在重復(fù)請(qǐng)求,若存在則取消已發(fā)的請(qǐng)求
removePendingRequest(config);
// 把當(dāng)前請(qǐng)求信息添加到pendingRequest對(duì)象中
addPendingRequest(config);
return config;
},
function (error) {
return Promise.reject(error);
}
);
/**
* @description 響應(yīng)攔截器 **/
axios.interceptors.response.use(
function (response) {
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
removePendingRequest(response.config);
// 該方法是項(xiàng)目中用到
// if (response.data.message == "您沒(méi)有獲得授權(quán)") {
// Message({
// type: "warning",
// message: "您沒(méi)有獲得授權(quán),請(qǐng)重新登錄",
// });
// localStorage.removeItem('token');
// localStorage.removeItem('data');
// router.push({
// name: "login",
// });
// }
return response;
},
function (error) {
// 從pendingRequest對(duì)象中移除請(qǐng)求
removePendingRequest(error.config || {});
if (axios.isCancel(error)) {
console.log("被取消的重復(fù)請(qǐng)求:" + 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中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法的文章就介紹到這了,更多相關(guān)Axios取消請(qǐng)求及阻止重復(fù)請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue 3 中使用路由參數(shù)跳轉(zhuǎn)時(shí) watch 觸發(fā)重復(fù)請(qǐng)求問(wèn)題解決
- vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)
- Vue axios庫(kù)避免重復(fù)發(fā)送請(qǐng)求的示例介紹
- vue阻止重復(fù)請(qǐng)求實(shí)現(xiàn)示例詳解
- Vue路由切換和Axios接口取消重復(fù)請(qǐng)求詳解
- vue axios攔截器常用之重復(fù)請(qǐng)求取消
- vue axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝的方法
- Vue3 + vue-query 的重復(fù)請(qǐng)求問(wèn)題解決
相關(guān)文章
解決Element ui導(dǎo)航欄選中背景色刷新消失的問(wèn)題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
vue使用recorder-core.js實(shí)現(xiàn)錄音功能
這篇文章主要介紹了vue如何使用recorder-core.js實(shí)現(xiàn)錄音功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
從零到一詳聊創(chuàng)建Vue工程及遇到的常見問(wèn)題
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問(wèn)題 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04

