uniapp 防止重复提交数据

当用户快速点击按钮时候。我们可以统一在 请求拦截 中做防止重复提交数据的处理

以下是使用uview2封装的request请求

import { autoLogin, getUserInfo } from '@/utils/method.js'
import { refreshToken } from '@/api/login.js'
const serversUrl = require('./serversUrl.js').serversUrl// 白名单
const whiteList = ['/szg-admin/api/app/wxLogin','/szg-admin/api/app/bingMobile','/auth/client/sms/sendCode','/auth/client/smsCode/login'
]module.exports = (vm) => {// 初始化请求配置uni.$u.http.setConfig((defaultConfig) => {// #ifdef H5defaultConfig.baseURL = '/h5api'// #endif// #ifndef H5defaultConfig.baseURL = serversUrldefaultConfig.sslVerify = falsedefaultConfig.firstIpv4 = false// #endif// 要加上这个 Content-type，不然app端请求会得不到响应defaultConfig.header['Content-Type'] = 'application/json;charset=UTF-8'defaultConfig.timeout = 20000return defaultConfig})// 请求拦截uni.$u.http.interceptors.request.use((config) => {// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}config.data = config.data || {}// 防止数据重复提交if (config.method === 'POST' || config.method === 'PUT' || config.method === 'DELETE') {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const storageRequestObj = uni.getStorageSync('storageRequestObj')if (!storageRequestObj) {uni.setStorageSync('storageRequestObj', requestObj)} else {const s_url = storageRequestObj.urlconst s_data = storageRequestObj.dataconst s_time = storageRequestObj.time// 间隔时间(ms)，小于此时间视为重复提交const interval = 1000if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {return Promise.reject('数据正在处理，请勿重复提交')} else {uni.setStorageSync('storageRequestObj', requestObj)}}}if (whiteList.includes(config.url)) return configconst token = uni.getStorageSync('token')if (token) {config.header.Authorization = `Bearer ${ token }`}return config}, err => {// 可使用async await 做异步操作return Promise.reject(err)})// 响应拦截uni.$u.http.interceptors.response.use((response) => {// console.log('响应拦截==', response);if (response.statusCode === 200 && response.data.code == 401) {uni.showModal({title: '页面停留超时',content: '请重新进入后继续操作',confirmText: '重新进入',showCancel: false,success: async e => {uni.removeStorageSync('token')// #ifdef MP-WEIXINawait autoLogin()// #endif// #ifndef MP-WEIXIN// 如果当前就在登录页面，不进行跳转if (uni.$u.page() != '/pages/login') {uni.navigateTo({ url: '/pages/login' })}// #endifreturn Promise.reject(response.data.msg || '页面停留超时')}})} else if (response.statusCode === 200) {return response.data} else {uni.showModal({title: '温馨提示',content: response.data.msg || response.data.error,showCancel: false})return Promise.reject(response.data.msg)}}, (err) => {// 对响应错误做点什么 statusCode !== 200console.log('<<<<<<响应错误>>>>>>', err)return Promise.reject(err)})
}

数据重复部分，可以直接复制这块代码过去放到你们的项目去

// 防止数据重复提交
if (config.method === 'POST' || config.method === 'PUT' || config.method === 'DELETE') {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const storageRequestObj = uni.getStorageSync('storageRequestObj')if (!storageRequestObj) {uni.setStorageSync('storageRequestObj', requestObj)} else {const s_url = storageRequestObj.urlconst s_data = storageRequestObj.dataconst s_time = storageRequestObj.time// 间隔时间(ms)，小于此时间视为重复提交const interval = 1000if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {return Promise.reject('数据正在处理，请勿重复提交')} else {uni.setStorageSync('storageRequestObj', requestObj)}}
}

原文作者：uniapp 防止重复提交数据_uni.$u.throttle-CSDN博客