重復提交數據造成臟數據解決方案
1、 前端請求限制重復,vue代碼如下
import axios from "~../../axios"
import {Loading, Message, MessageBox, Notification} from "~../../element-ui"
import store from "~../../../src/store"
import {getToken} from "./auth"
import errorCode from "./errorCode"
import {blobValidate, tansParams} from "./ruoyi"
import {saveAs} from "~../../file-saver"
import {getAbsolutePath} from "./index"
let downloadLoadingInstance
// 是否顯示重新登錄
let isReloginShow
// 請求重復提交限制 2023-11-03
const requestQueue = {
//請求限制時間,單位毫秒;0不啟用,大于0啟用;一秒鐘不允許重復提交
limitTime: 1000,
//存放請求配置隊列
queue: [
// {
// createTime: Number,
// url: String,
// method: String,
// cancel: Function,
// dataMd5: String
// }
],
//請求限制時間的方法
limitMethods: ['post', 'delete', 'put'],
//當前請求是否可用
canUsed(config) {
if (isNaN(this.limitTime) || Number(this.limitTime) <= 0) return false;
//只驗證post提交數據
if (config) {
let method = (config.method || '').toLowerCase();
return this.limitMethods.indexOf(method) > -1;
}
return true;
},
isSameRequest(r1, r2) {
let same = r1.url === r2.url && r1.method === r2.method;
if (r1.dataMd5 || r2.dataMd5) {
same = same && r1.dataMd5 == r2.dataMd5
}
return same;
},
//獲取數據的md5值,暫未實現,根據后續需要決定是否實現
createDataMd5(data) {
return data ? null : null;
},
//添加請求到隊列
addRequest(config) {
if (!this.canUsed(config)) return;
let _config = this.queue.some(p => this.isSameRequest(p, config));
if (!_config) {
let _this = this;
config.cancelToken = new axios.CancelToken((cancel) => {
this.queue.push({
url: config.url,
method: config.method,
cancel,
createTime: Date.now(),
dataMd5: _this.createDataMd5(config.data) //根據實際情況是否支持data數據的計算md5
})
})
} else {
config.cancelToken = new axios.CancelToken((cancel) => {
cancel('Duplicate request');
})
}
},
//刪除超時請求
removeRequestOverTime() {
if (!this.canUsed()) return;
const nowDate = Date.now();
for (const q in this.queue) {
const {createTime} = this.queue[q];
const time = nowDate - createTime;
if (time >= (this.limitTime)) {
this.queue.splice(Number(q), 1);
}
}
},
//刪除請求
removeRequest(config) {
if (!config) return;
if (!this.canUsed(config)) return;
for (const [index, p] of Object.entries(this.queue)) {
if (this.isSameRequest(p, config)) {
if (p.createTime) {
if ((Date.now() - p.createTime) > (this.limitTime)) {
this.queue.splice(Number(index), 1);
} else {
if (p.cancel) p.cancel('Duplicate request');
}
} else {
this.queue.splice(Number(index), 1);
}
break;
}
}
},
};
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8"
// 創建axios實例
const service = axios.create({
// axios中請求配置有baseURL選項,表示請求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超時
timeout: 120000
})
// request攔截器
service.interceptors.request.use(
(config) => {
// 是否需要設置 token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers["Authorization"] = "Bearer " + getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
}
// get請求映射params參數
if (config.method === "get" && config.params) {
let url = config.url + "?" + tansParams(config.params)
url = url.slice(0, -1)
config.params = {}
config.url = url
}
//2023-11-03 請求重復限制
if (config.url) {
requestQueue.removeRequest(config)
requestQueue.addRequest(config);
}
return config
},
(error) => {
console.log(error)
Promise.reject(error)
}
)
// 響應攔截器
service.interceptors.response.use(
(res) => {
//2023-11-03 請求重復限制
requestQueue.removeRequest(res.config)
// 未設置狀態碼則默認成功狀態
const code = res.data.code || 200
// 獲取錯誤信息
const msg = errorCode[code] || res.data.msg || errorCode["default"]
// 二進制數據則直接返回
if (
res.request.responseType === "blob" ||
res.request.responseType === "arraybuffer"
) {
return res.data
}
if (code === 401) {
if (!isReloginShow) {
isReloginShow = true
MessageBox.confirm('登錄狀態已過期,您可以繼續留在該頁面,或者重新登錄', '系統提示', {
confirmButtonText: "重新登錄",
cancelButtonText: "取消",
type: "warning"
}
).then(() => {
isReloginShow = false
store.dispatch('LogOut').then(() => {
// 如果是登錄頁面不需要重新加載
if (window.location.hash.indexOf("#/login") != 0) {
location.href = getAbsolutePath('/index')
}
})
}).catch(() => {
isReloginShow = false
})
}
return Promise.reject("無效的會話,或者會話已過期,請重新登錄。")
} else if (code === 500) {
Message({
message: msg,
type: "error"
})
return Promise.reject(new Error(msg))
} else if (code !== 200) {
Notification.error({
title: msg
})
return Promise.reject("error")
} else {
return res.data
}
},
(error) => {
console.log("err" + error)
let {message} = error
if (message == "Network Error") {
//message = "后端接口連接異常"
message = "網絡異常"
} else if (message.includes("timeout")) {
//message = "系統接口請求超時"
requestQueue.removeRequestOverTime();
message = "請求超時"
} else if (message.includes("Request failed with status code")) {
let t_port = message.substr(message.length - 3);
if (t_port == '404') {
message = "未找到系統資源"
} else
message = "系統接口" + message.substr(message.length - 3) + "異常"
} else if (message.includes('Duplicate request')) {
//2023-11-03
message = "重復提交,請求太頻繁"
}
Message({
message: message,
type: "error",
duration: 5 * 1000
})
return Promise.reject(error)
}
)
// 通用下載方法
export function download(url, params, filename) {
downloadLoadingInstance = Loading.service({
text: "正在下載數據,請稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
})
return service
.post(url, params, {
transformRequest: [
(params) => {
return tansParams(params)
}
],
headers: {"Content-Type": "application/x-www-form-urlencoded"},
responseType: "blob"
})
.then(async (data) => {
const isLogin = await blobValidate(data)
if (isLogin) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text()
const rspObj = JSON.parse(resText)
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg)
}
downloadLoadingInstance.close()
})
.catch((r) => {
console.error(r)
Message.error("下載文件出現錯誤!")
downloadLoadingInstance.close()
})
}
// 通用下載方法 get
export function downloadGet(url, params, filename, callback) {
downloadLoadingInstance = Loading.service({
text: "正在下載數據,請稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
})
return service.get(url, {
// transformRequest: [(params) => {
// return tansParams(params)
// }],
params: params,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
responseType: 'blob'
}).then((data) => {
downloadLoadingInstance.close();
//console.log('service.get',data);
const isLogin = blobValidate(data);
if (isLogin) {
const blob = new Blob([data]);
if (callback) {
callback(blob);
return;
}
saveAs(blob, filename)
} else {
const resText = data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
}).catch((r) => {
console.error(r)
Message.error('下載文件出現錯誤,請聯系管理員!')
downloadLoadingInstance.close();
})
}
export default service
2、 業務處理代碼采取單例模式
3、 插入數據時使用SQL驗重。

浙公網安備 33010602011771號