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 H5
		defaultConfig.baseURL = '/h5api'
		// #endif

		// #ifndef H5
		defaultConfig.baseURL = serversUrl
		defaultConfig.sslVerify = false
		defaultConfig.firstIpv4 = false
		// #endif

		// 要加上这个 Content-type，不然app端请求会得不到响应
		defaultConfig.header['Content-Type'] = 'application/json;charset=UTF-8'
		defaultConfig.timeout = 20000
		return 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.url
				const s_data = storageRequestObj.data
				const s_time = storageRequestObj.time
				// 间隔时间(ms)，小于此时间视为重复提交
				const interval = 1000
				if (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 config

		const 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-WEIXIN
					await autoLogin()
					// #endif

					// #ifndef MP-WEIXIN
					// 如果当前就在登录页面，不进行跳转
					if (uni.$u.page() != '/pages/login') {
						uni.navigateTo({ url: '/pages/login' })
					}
					// #endif

					return 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 !== 200
		console.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.url
        const s_data = storageRequestObj.data
        const s_time = storageRequestObj.time
        // 间隔时间(ms)，小于此时间视为重复提交
        const interval = 1000
        if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
            return Promise.reject('数据正在处理，请勿重复提交')
        } else {
            uni.setStorageSync('storageRequestObj', requestObj)
        }
    }
}

当前也可以在按钮上做节流（规定时间内，只触发一次）处理。

说明：本文都是基于uview2框架来的