uniapp はデータの重複送信を防ぎます

ユーザーがボタンを素早くタップしたとき。リクエストインターセプターでのデータの繰り返し送信を防ぐための処理を統一的に行うことができます。

以下は、uview2 にパッケージ化されたリクエストです。

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)
        }
    }
}

現在、スロットル (指定された時間内に 1 回だけトリガーされる)もボタンで実行できます。

注: この記事は uview2 フレームワークに基づいています

<template>
    <view class="">
		<!-- 此处用法为在模板中使用，无需写this，直接$u.throttle()即可 -->
    	<view @click="$u.throttle(btnAClick, 500)">
    		露从今夜白
    	</view>
        
        <!-- 在模板中传参写法 -->
    	<view @click="$u.throttle(() => { onBuy(1) }, 1000)">
    		购买
    	</view>

    	<view @click="onCollect(1)">
    		收藏
    	</view>
    </view>
</template>

<script>
    export default {
        methods: {
            btnAClick() {
				console.log('btnClick');
			},

			onBuy(num) {
                console.log('购买', num);
			},

            onCollect(num) {
                // 此处用法为在js中调用，需要写uni.$u.throttle()
                uni.$u.throttle(() => {
					console.log('收藏', num);
				}, 1000)
            }
        }
    }
</script>