前端做后台管控系统,在某些接口请求时间过长的场景下,需要防止用户反复发起请求。

  假设某场景下用户点击查询按钮后,后端响应需要长时间才能返回数据。那么要规避用户返回点击查询按钮无外乎是让用户无法在合理时间内再次点击按钮。实现方式也有好几种:

    1、在按钮点击发起请求后,弹个蒙层,显示个loading,等请求数据返回了将蒙层隐藏掉。

    2、在按钮点击发起请求后,将按钮禁用掉,同样等数据返回了将按钮禁用解除。

  以上是比较常见的2种方案。

  实现上最简单的肯定是在需要的页面种在请求前和拿到数据后,单独处理。这种方案优点仅仅是简单,但是每个需要处理的页面都要单独写一串重复的代码,哪怕利用mixin也要多不少冗余代码。

  如果是利用指令的方式仅仅需要在合适的地方加上个一条v-xxxx,其他都在指令的逻辑内统一处理。

  以第二种方式为例:

    

clickForbidden.js

let forbidClick = null;
export default {
bind(e) {
const el = e;
let timer = null;
forbidClick = () => {
el.disabled = true;
el.classList.add('is-disabled');
timer = setTimeout(() => {
   el.disabled = false; 
el.classList.remove('is-disabled');
}, 3000);
};
el.addEventListener('click', forbidClick);
},
unbind() {
document.removeEventListener('click', forbidClick);
},
};

  

  指令的逻辑很简单,当按钮插入到DOM节点后,添加一个监听click的事件,当按钮点击后,就将按钮禁用,并加上一个禁用样式,并在3s后将该按钮解除禁用。

  再考虑请求,以axios为例:

api.js
import axios from 'axios'; export baseURL = 'xxxx';
const api = axios.create({
baseURL,
 timeout: 3000,
}); /* 记录当前请求是否完成 */
window.currentResq = {
done: true,
config: {},
}; api.interceptors.request.use(function(config) {
clearTimeout(resqTimer);
window.currentResq = {
done: false,
config,
};
// 接口请求时长超过3s,则视为完成,不管请求结果成功或失败
resqTimer = setTimeout(() => {
window.currentResq = {
done: true,
config: {},
};
}, 3000);
}); api.interceptors.response.use(function(response) {
const { config } = window.currentResq;
const { url, method, data } = response.config;
if (config.url === url && config.method === method && config.data === data) {
clearTimeout(resqTimer);
window.currentResq.done = true;
}
return response;
}, function (error) {
return error;
}); export default api;

  用一个全局的currentResq来作为请求是否完成的标志。在axios请求拦截器种,将当前请求的数据记录在currentResq中,并将done设置为false。在axios响应拦截器中,约定url,method,data3个参数一样时,就是当前currentResq中记录的请求返回数据,并将done设置为true。

  同样的在指令逻辑中加入一个轮询监听currentResq的done是否完成。

  

clickForbidden.js

let forbidClick = null;
export default {
bind(e) {
const el = e;
let timer = null;
forbidClick = () => {
el.disabled = true;
el.classList.add('is-disabled');
timer = setInterval(() => {
if (window.currentResq.done) {
clearInterval(timer);
el.disabled = false;
el.classList.remove('is-disabled');
}
}, 500);
};
el.addEventListener('click', forbidClick);
},
unbind() {
document.removeEventListener('click', forbidClick);
},
};

  这样就实现了只要在按钮上加上了v-clickForbidden。按钮点击后就会被禁用,仅当某个请求返回数据或者3s后将按钮的禁用解除。

  现在仅仅考虑按钮一次仅发送了一个请求的场景,在currentResq中也可以用一个数据来记录请求。

Vue 利用指令实现禁止反复发送请求的更多相关文章

  1. 更好一点的:Vue 利用指令实现禁止反复发送请求

    理论上可以用于任何元素,生效时会在元素上出现一个同大小的灰色蒙层(button元素会该表原生的disabled属性). /** * 当元素触发发起请求后,当发起的请求中最后一个请求的结果返回(不关心返 ...

  2. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  3. vue-resource发送请求

    <!DOCTYPE html> <html> <head> <title>vue-resource</title> <meta cha ...

  4. Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  5. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  6. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  7. Vue笔记:使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

  8. 如何利用fiddler篡改发送请求和截取服务器信息

    一.断点的两种方式 1.before response:在request请求未到达服务器之前打断 2.after response:在服务器响应之后打断 二.全局打断 1.全局打断就是中断fiddle ...

  9. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

随机推荐

  1. MyBatis 二级缓存全详解

    目录 MyBatis 二级缓存介绍 二级缓存开启条件 探究二级缓存 二级缓存失效的条件 第一次SqlSession 未提交 更新对二级缓存影响 探究多表操作对二级缓存的影响 二级缓存源码解析 二级缓存 ...

  2. 跟着大彬读源码 - Redis 10 - 对象编码之整数集合

    [TOC] 整数集合是 Redis 集合键的底层实现之一.当一个集合只包含整数值元素,并且元素数量不多时,Redis 就会使用整数集合作为集合键的底层实现. 1 整数集合的实现 整数集合是 Redis ...

  3. Ant Design Pro 脚手架+umiJS 实践总结

    一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是 ...

  4. int string类型互转

    int -> String int i=12345;String s="";第一种方法:s=i+"";第二种方法:s=String.valueOf(i); ...

  5. springboot搭建通用mapper

    对于搭建一个小项目自己测试玩如果采用传统的SSM框架配置起来太过于繁琐,使用springboot简化配置再搭配通用mapper简直不要太方便,话不多说,直接上代码. 首先是pom文件,直接去sprin ...

  6. F#周报2019年第34期

    新闻 高效的F#,提示与技巧 Fable 社区资源 Visual Studio提示与技巧:为.NET增加生产力 无风险地尝试Compositional IT的培训包--如果没有增加任何价值,可以得到完 ...

  7. python 37 同步、异步调用

    目录 1. 阻塞与非阻塞 2. 同步与异步 2.1 异步调用 2.2 同步调用 2.3 异步调用回收的第一种方式 3. 异步调用+回调函数 3.1 requests模块 3.2 异步调用回收的第二种方 ...

  8. MyBatis源码下载安装教程

    一.下载(原文链接:http://www.studyshare.cn/software/details/1177/1 github下载:去下载 百度网盘下载:去下载 提取码:d1er 二.安装 1.检 ...

  9. 马蜂窝视频编辑框架设计及在 iOS 端的业务实践

    (马蜂窝技术公众号原创内容,ID: mfwtech) 熟悉马蜂窝的朋友一定知道,点击马蜂窝 App 首页的发布按钮,会发现发布的内容已经被简化成「图文」或者「视频」. 长期以来,游记.问答.攻略等图文 ...

  10. d3.js 教程 模仿echarts柱状图

    由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...