1免费做网站_家乡网页设计论文_适合发朋友圈的营销广告_网址注册在哪里注册

防止接口重复请求是为了避免用户在短时间内多次点击同一个按钮，导致后端接口被多次调用，引发数据异常或性能问题。
之前的文章介绍过后端如何防止接口重复请求，这篇文章介绍一下前端如何防止接口重复提交。

按钮禁用

用户点击按钮后立即将按钮设置为禁用状态，待接口返回结果或一段时间后再恢复按钮可用。这样可以有效防止用户在请求未完成时重复点击。

const submitForm = () => {if (!buttonDisabled) {buttonDisabled = true;axios.post('/api/submit', data).then(response => {// 请求成功}).catch(error => {// 错误处理}).finally(() => {// 恢复按钮状态buttonDisabled = false;});}}

请求拦截器

以下是若依源码：

// request拦截器
service.interceptors.request.use(config => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === falseif (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;}if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const sessionObj = cache.session.getJSON('sessionObj')if (sessionObj === undefined || sessionObj === null || sessionObj === '') {cache.session.setJSON('sessionObj', requestObj)} else {const s_url = sessionObj.url;                // 请求地址const s_data = sessionObj.data;              // 请求数据const s_time = sessionObj.time;              // 请求时间const interval = 1000;                       // 间隔时间(ms)，小于此时间视为重复提交if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {const message = '数据正在处理，请勿重复提交';console.warn(`[${s_url}]: ` + message)return Promise.reject(new Error(message))} else {cache.session.setJSON('sessionObj', requestObj)}}}return config
}, error => {Promise.reject(error)
})

这段代码是一个请求拦截器，用于拦截发送的HTTP请求，并对请求进行一些预处理操作，主要包括Token注入和防止重复提交的功能。以下是代码的具体作用：

1. Token设置

const isToken = (config.headers || {}).isToken === false;
if (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken(); 
}

• 作用：检查当前请求是否需要携带Token。通过config.headers.isToken字段决定，若isToken为false，表示不需要携带Token，否则会将Authorization头设置为带有Bearer前缀的Token。
• 逻辑：getToken()用于获取存储的Token（比如从cookie或localStorage中），并在请求头中注入Authorization，这样后端能够识别用户身份。

2. GET请求参数处理

if (config.method === 'get' && config.params) {let url = config.url + '?' + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;
}

• 作用：对于GET请求，将params参数序列化并拼接到URL中。
• 逻辑：如果请求是GET方法，并且存在params参数，那么它会将这些参数通过tansParams方法（通常是将参数对象转为key=value形式的字符串）拼接到URL后面。最后清空config.params，并将新的URL赋值给config.url。

3. 防止重复提交

const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const sessionObj = cache.session.getJSON('sessionObj');if (sessionObj === undefined || sessionObj === null || sessionObj === '') {cache.session.setJSON('sessionObj', requestObj);} else {const s_url = sessionObj.url;const s_data = sessionObj.data;const s_time = sessionObj.time;const interval = 1000;if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {const message = '数据正在处理，请勿重复提交';console.warn(`[${s_url}]: ` + message);return Promise.reject(new Error(message));} else {cache.session.setJSON('sessionObj', requestObj);}}
}

• 作用：用于防止短时间内重复提交相同的POST或PUT请求。
• 逻辑：
  1. 通过检查config.headers.repeatSubmit字段判断是否启用防重复提交（false表示不启用防重）。
  2. 对于需要防止重复提交的请求（POST或PUT方法），会将请求的url、data和当前时间time封装为requestObj对象。
  3. 读取会话缓存中的上一次请求对象（sessionObj），如果不存在，则将当前请求对象保存到会话缓存中。
  4. 如果上一次请求的url、data和当前请求相同，且两次请求时间间隔小于1秒钟（interval = 1000），则视为重复提交，拦截请求并返回错误信息。
  5. 否则，将当前请求对象更新到缓存中，允许请求继续发送。