Vue 利用指令实现禁止反复发送请求的两种方法

 更新时间:2019年09月15日 09:33:34   作者:悠悠洛  
这篇文章主要介绍了Vue 利用指令实现禁止反复发送请求的两种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

    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,<br data-filtered="filtered"> 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 利用指令实现禁止反复发送请求的两种方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 使用vue-cli创建vue项目介绍

    使用vue-cli创建vue项目介绍

    这篇文章介绍了使用vue-cli创建vue项目的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • vue实现计步器功能

    vue实现计步器功能

    这篇文章主要为大家详细介绍了vue实现计步器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • VUE DOM加载后执行自定义事件的方法

    VUE DOM加载后执行自定义事件的方法

    今天小编就为大家分享一篇VUE DOM加载后执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue中$once的两个实用小技巧分享

    Vue中$once的两个实用小技巧分享

    $once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除,下面这篇文章主要给大家介绍了关于Vue中$once的两个实用小技巧,需要的朋友可以参考下
    2022-04-04
  • window.onresize在vue中只能使用一次,自适应resize报错问题

    window.onresize在vue中只能使用一次,自适应resize报错问题

    这篇文章主要介绍了window.onresize在vue中只能使用一次,自适应resize报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue自定义组件双向绑定实现原理及方法详解

    Vue自定义组件双向绑定实现原理及方法详解

    这篇文章主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • Vue创建头部组件示例代码详解

    Vue创建头部组件示例代码详解

    本文通过实例代码给大家介绍了Vue创建头部组件的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • vue router仿天猫底部导航栏功能

    vue router仿天猫底部导航栏功能

    这篇文章主要介绍了vue router仿天猫底部导航栏功能,需要的朋友可以参考下
    2017-10-10
  • vue组件间的通信,子组件向父组件传值的方式汇总

    vue组件间的通信,子组件向父组件传值的方式汇总

    这篇文章主要介绍了vue组件间的通信,子组件向父组件传值的方式汇总,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue+koa2实现session、token登陆状态验证的示例

    vue+koa2实现session、token登陆状态验证的示例

    这篇文章主要介绍了vue+koa2实现session、token登陆状态验证的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论