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

2024-09-29 03:02:32

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

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

　　　　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用axios发送post请求自动set cookie

vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true
VUE axios发送跨域请求需要注意的问题

在实际项目中前端使用到vue,后端使用php进行开发.前端使用axios请求请求关于跨域跨域的概念这些就不说了,百度一大堆相关的资料信息.我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛. 不多说,直接上代码~~~~ 同理,跨域的解决方案为cros.服务器 PHP端代码如下(laravel 中间件进行处理): public function handle($request, Closure $next) { if ($request->isMethod('OP
vue项目使用axios发送请求让ajax请求头部携带cookie的方法

最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios
Vue.js实战之使用Vuex + axios发送请求详解

前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma
vue发送ajax请求详解

vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护本文为大家介绍vue使用axios发送AJAX请求首页安装并引入axios 1.npm install axios -S #直接下载axios组件,下载完毕后axios.js就存放在node_modules
vue中axios处理http发送请求的示例（Post和get）

本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios文档在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装使用node npm install axios 使用cdn <scrip
vue解决一个方法同时发送多个请求的问题

在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求.这是不允许出现的. 但是怎么解决这个问题呢? 一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就可以避免重复发送请求了.但是我发现这个有一个弊端,那就是: 如果,该事件有许多的验证,比如电话.邮箱格式是否正确呀,必填的是否填了呀等等.一旦你点击就把按钮disabled了,发现该填的没填,回去填完后发现按钮不能点了?那是因为刚才点击的时候被你disabled了,所以还得在验证的方法中取消按
vue发送websocket请求和http post请求的实例代码

先给大家介绍下vue发送websocket请求和http post请求直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo
Vue 利用指令实现禁止反复发送请求的两种方法

前端做后台管控系统,在某些接口请求时间过长的场景下,需要防止用户反复发起请求. 假设某场景下用户点击查询按钮后,后端响应需要长时间才能返回数据.那么要规避用户返回点击查询按钮无外乎是让用户无法在合理时间内再次点击按钮.实现方式也有好几种: 1.在按钮点击发起请求后,弹个蒙层,显示个loading,等请求数据返回了将蒙层隐藏掉. 2.在按钮点击发起请求后,将按钮禁用掉,同样等数据返回了将按钮禁用解除. 以上是比较常见的2种方案. 实现上最简单的肯定是在需要的页面种在请求前和拿到数据后,单独处理.这
java发送http get请求的两种方法(总结)

长话短说,废话不说一.第一种方式,通过HttpClient方式,代码如下: public static String httpGet(String url, String charset) throws HttpException, IOException { String json = null; HttpGet httpGet = new HttpGet(); // 设置参数 try { httpGet.setURI(new URI(url)); } catch (URISyntaxExc
django ajax发送post请求的两种方法

django ajax发送post请求的两种方法,具体内容如下所述: 第一种:将csrf_token放在from表单里 <script> function add_competion_goods() { $.ajax({ url: "{% url 'add_competition_goods' %}", type: "POST", dataType: "json", data: $('#add_competition_goods_fr
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下:  <el-table :data="tableData" class="table" stripe border v-loading="loading"> <el-table-column type="ind
vue父组件向子组件动态传值的两种方法

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu
利用JavaScript阻止表单提交的两种方法

在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g
vue resource发送请求的几种方式

vue resource发送请求,代码如下所示: <!DOCTYPE html> <html> <head> <title>vue-resource</title> <meta charset="utf-8"> </head> <body> <div id="app"> <input type="button" value="
vue中element 的upload组件发送请求给后端操作

1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil
springboot vue测试平台接口定义及发送请求功能实现

目录基于 springboot+vue 的测试平台开发一.http客户端选型二.后端接口实现 1. controller 层 2. service 层三.前端实现四.修改遗留 bug 基于 springboot+vue 的测试平台开发继续更新添加的接口,我要来调试确定是否是通的,那么要发送接口请求,今天来实现这个功能,先预览一下: 捋一下思路,分为三步走: 点击发送按钮,调用后端接口后端接口处理内部,发送http接口请求后端接口把响应返回给前端展示一.http客户端选型为了更方
详解JavaScript发送埋点请求的两种方式

目录一.用法 1.动态创建<img> 2.动态创建<script> 二.区别区别1 区别2 三.选择哪种方式四.总结对于统计页面数据这样的情景(俗称埋点),我们常用的方式就是动态创建<img>或<script>,至于原因,一般有以下几点: 1.埋点一般不用关心请求的结果 2.可以实现跨域请求 3.无需使用ajax就能达到发请求的目的 4.都是原生实现,兼容性好现就两种方式做一下对比和总结: 一.用法 1.动态创建<img> 方式1:通过

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

相关推荐

随机推荐