Vue如何防止按钮重复点击方案详解

目录
  • 前言
  • 目的
  • 文件结构
  • 实现
    • 请求拦截
    • 响应拦截
    • 取消重复发送请求
  • 调用

前言

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

axios 是目前最优秀的 HTTP 请求库之一, 我们封装 axios 请求也是为了让代码看的更加清晰, 后期好维护.

目的

  • 实现请求拦截
  • 实现响应拦截
  • 常见错误处理
  • 不能请求头设置
  • api 集中式管理

(取消重复请求,重复发送请求, 请求缓存等情况均还未实现)

文件结构

实现

index.js内代码如下:

引入

// 引入 axios
import axios from 'axios';
// 请求配置单独写一个文件 baseurl.js
import serverConfig from './baseurl.js'

创建一个实例

const serviceAxios = axios.creat({
	baseURL: serverConfig.baseURL, //基础请求地址
    timeout: 1000 , //请求超时设置
    withCredentials: false, // 跨域请求是否需要携带 cookie
})

请求拦截

serviceAxios.interceptors.request.use(
    (config) => {
        console.log("请求配置", config);
        // 是否使用 Token,
        if(serverConfig.useTokenAuthorization) {
            config.headers["Authorization"] = localStorage.getItem("token");
        }
        // 设置请求头
        if(config.method === "post") {
            config.headers["content-type"] = "application/x-ww-form-urlencoded";
            // config.data = qs.stringify(config.data); //序列化  效果等同于下行代码
            config.requestType = "form"
        } else {
            config.headers["content-type"] = "application/json"
        }
        // 返回
        return config
    },
    (error) => {
        Promise.reject(error)
    }
)

响应拦截

serviceAxios.interceptors.response.use(
    (res) => {
        console.log("响应拦截", res);
        let data = res.data;
        // 处理自己的业务逻辑,如 token 是否过期...
        return data;
    },
    (error) => {
        let message = ""
        if(error && error.response) {
            switch (error.response.status) {
                case 302:
                    message = "接口重定向了! ";
                    break;
                case 400:
                    message = "参数不正确! ";
                    break;
                case 401:
                    message = "您未登录, 或者登录已经超时, 请先登录! "
                    break;
                case 403:
                    message = "您还没有权限操作! ";
                    break;
                case 404:
                    message = `请求地址出错: ${error.response.config.url}`;
                    break;
                case 408:
                    message = "请求超时! ";
                    break;
                case 409:
                    message = "系统已存在相同数据! "
                    break;
                case 500:
                    message = "服务器内部错误! "
                    break;
                case 501:
                    message = "服务未实现! "
                    break;
                case 502:
                    message = "回答错误! "
                    break;
                case 503:
                    message = "服务不可用"
                    break;
                case 504:
                    message = "服务暂时无法访问, 请稍后再试"
                    break;
                case 505:
                    message = "HTTP 版本不受支持! "
                    break;
                default:
                    message = "异常问题, 请联系管理员! "
                    break;
            }
        }
        return Promise.reject(message);
    }
);

取消重复发送请求

实现思想

唯一标识值 : 每次发起请求的时候根据请求的方式,请求URL,请求携带参数设置一个唯一标识值.

请求队列: 创建一个map对象储存请求的唯一标识值.

每次发送请求的时候, 在请求拦截中判断请求队列中是否存在这个请求, 存在就说明这个请求正在进行中,那么就取消正在发送的请求,重新发送请求; 不存在就将本次请求加入请求队列中.

在响应拦截中将本次请求从请求队列中移除.

生成唯一标识值函数

import qs from 'qs'
function regsoleKey(config){
    const {method, url, params, data } = config;
    return [method, url, qs.stringify(params), qs.stringify(data)].join('&')
}

将请求加入请求队列函数

const reqQueue = new Map();
function addreqQueue(config){
    //调用生成唯一标识值函数, 生成 requestKey
    const requestKey = regsoleKey(config);
    //为每个请求创建一个专属的 CancelToken(用于取消请求)
    config.cancelToken = config.cancelToken || new axios.CancelToken((cancel)=>{
        // 判断 reqQueue 中是否含有 requestKey,
        // 将 requestKey 与 CancelToken 以键值对的形式保存到map对象中
        if(!reqQueue.has(requestKey)){
            reqQueue.set(requestKey,cancel)
        }
    });
}

将请求从请求队列移除

function removereqQueue(config){
    // 标识值
    const requestKey = generateReqKey(config);
    if(reqQueue.has(requestKey)){
        // 取消之前发出请求
       const cancelToken = reqQueue.get(requestKey);
       cancelToken(requestKey);
        // 从队列移除
       reqQueue.delete(requestKey);
    }
}

请求拦截器

serviceAxios.interceptors.request.use(
	function(config) {
		removereqQueue(config); // 检查是否重复发送请求
		addreqQueue(config); //将本次请求加入请求队列
		return config
	},
	(error) => {
		return Promise.reject(error)
	}
)

响应拦截器

serviceAxios.interceptors.response.use(
	(res) => {
		removereqQueue(res.config); //请求从请求队列移除
		return res
	},
	(error) => {
		removereqQueue(error.config || {}); //请求从请求队列移除
		//....
	}
)
// 最后
export default serviceAxios

baseurl.js代码如下

const serverConfig = {
    baseURL: 'https://fm-emo-music-api.vercel.app',
    useTokenAuthorization: true, //是否开启 token 验证
}
export default serverConfig

api.js代码如下

// 引入index.js
import serviceAxios from './index.js'
// get实例
export const VideoRecommendLike = (params) => {
    return serviceAxios({
        method: "get",
        url: "/dj/personalize/recommend",
        params,
    })
}
// post实例
export const ConfirmPhone = (data) =>{
    return serviceAxios({
        method: "post",
        url: "/captcha/sent",
        data,
    })
}

调用

如何在原生js文件内调用?

首先引入axios文件

    <!-- axios请求文件 -->
    <script src="/src/utils/axios.js"></script>

再引入带有axios请求的js文件, 请求文件内使用es6新语法按需引入api.js文件

例:

import {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->useRouter} from '../../router/app.js'

如何在Vue文件内使用?

示例:

  // 按需引入请求接口
    import {emailCounts} from "@/api/api.js"
    export default {
    	...
    	// 异步进行axios请求
    	methods: {
    		async comein(){
    			let res = await emailCount(params)
    			console.log(res)
    		}
		}
    }

到此这篇关于Vue如何防止按钮重复点击方案详解的文章就介绍到这了,更多相关Vue按钮重复点击内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 在vue中使用防抖和节流,防止重复点击或重复上拉加载实例

    废话不多说,直接上代码吧! /** * 函数防抖 (只执行最后一次点击) * @param fn * @param delay * @returns {Function} * @constructor */ export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () { let args = argum

  • vue 禁止重复点击发送多次请求的实现

    目录 1.通过控制 loading 来设置 loading,或者 disabled 2.使用Vue自定义指令 3. 使用debounce函数 4.最终解决方案lodash 某些情况下,为了阻止用户短时间内重复点击某个按钮,导致前端向后端重复发送多次请求. 1.通过控制 loading 来设置 loading,或者 disabled 刚开始直接给按钮加上loading效果,即在请求前 loading为true, 在请求结束finally里loading置为false,以达到阻止重复点击的问题,但部

  • Vue router/Element重复点击导航路由报错问题及解决

    目录 Vue router/Element重复点击导航路由报错 解决方法如下 Vue使用element-UI路由报错问题 报错代码 修改方案 Vue router/Element重复点击导航路由报错 虽然此报错并不会影响项目运行,但是作为一个强迫症的码农的确受不了error 解决方法如下 方法1:在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可: 方法2:若不想更换版本解决方法 在router.js中加入以下代码就可以 记住插入的位置 c

  • vue axios重复点击取消上一次请求封装的方法

    使用场景 重复点击或者多tab标签使用一个视图等(当然也可以用加载中或者透明背景禁止请求中再次点击) 封装代码 来自于互联网 let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending[p].u === config.url + '&' + conf

  • Vue中的全局指令防止按钮重复点击

    目录 全局指令防止按钮重复点击 1.common.js 2.在需要引入的页面引入(**.vue) 防重复点击(vue指令实现) 阻止快速点击按钮会重复多次调用接口的 全局指令防止按钮重复点击 1.common.js 首先引入Vue import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', {   inserted: function (el, binding) {     el.addEventLi

  • vue 如何处理防止按钮重复点击问题

    目录 处理防止按钮重复点击 vue防止重复执行点击事件 方法一:在规定时间内将按钮禁用的方法 方法二:用指令的方式实现,全局注册 处理防止按钮重复点击 1.在button上绑定动态的disabled <el-button type="primary" size="mini" @click="testCode" :disabled="codeDisabled">发送验证码</el-button> 2.在d

  • 解决vue 按钮多次点击重复提交数据问题

    这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: •第一种: 不操作数据型 •第二种: 操作数据型 <template> <button @click="submit()" :disabled="isDisable">点击</button> </template> <script> export default { name: 'TestButton',

  • Vue如何防止按钮重复点击方案详解

    目录 前言 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 前言 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios 是目前最优秀的 HTTP 请求库之一, 我们封装 axios 请求也是为了让代码看的更加清晰, 后期好维护. 目的 实现请求拦截 实现响应拦截 常见错误处理 不能请求头设置 api 集中式管理 (取消重复请求,重复发送请求, 请求缓存等情况均还未实现) 文件结构 实现 index.js内代码如下: 引入

  • vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

  • 对于防止按钮重复点击的尝试详解

    导语:随着接触的项目增加,很多项目都是遇到同样的问题,而每次都是使用一贯的手法进行处理.有时候有些方法并不是那么的优雅甚至有些冗余,所以自己也想开始尝试不同的方法去解决同样的问题. 我经常在项目中会遇到按钮重复点击后引起表单的重复点击问题.所以针对这个问题,自己尝试了几种办法分别去解决.直接上代码. 1.粗暴简单办法 直接定义一个变量,每次点击过后等所有操作结束后释放变量.或使用loading防止用户点击 //* 部分代码 <script> export default { methods:

  • 关于javascript中限定时间内防止按钮重复点击的思路详解

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比如1秒)防止按钮被重复点击的方法会不会更好一点呢? 思路一 最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数 <button id="btn">0</button> <script> btn.onclick = function

  • 实例详解Android解决按钮重复点击问题

    为了防止用户或者测试MM疯狂的点击某个button,写个方法防止按钮连续点击.具体实例代码如下所示: public class BaseActivity extends Activity { protected boolean isDestroy; //防止重复点击设置的标志,涉及到点击打开其他Activity时,将该标志设置为false,在onResume事件中设置为true private boolean clickable=true; @Override protected void on

  • Android 快速实现防止网络重复请求&按钮重复点击的方法

    在日常开发过程中,偶尔会出现一些极端问题.比如 网络重复请求,很难过滤 请求的问题. 下面一段代码,可以解决这个重复请求的问题. 下面上一段代码: private long lastClick; // 防止网络重新请求 if (System.currentTimeMillis() - lastClick <= 1000) { return; } lastClick = System.currentTimeMillis(); 以上这篇Android 快速实现防止网络重复请求&按钮重复点击的方法

  • Android防止按钮重复点击示例代码

    本文中我将介绍一下我自己封装的一个小的工具类库:按钮点击事件类库. 作用:该类库可以防止按钮重复点击,可以判断网络状态,可以判断用户登录状态,以及自定义验证条件等等. 说明:其实现的核心原理就是通过自定义实现自身的OnClickListener类,并重写其中的onClick方法,在onClick方法中执行相应的判断逻辑之后回调我们自定义的抽象方法. 具体效果如下图所示: 使用方式 屏蔽多次点击事件 /** * 测试快速点击事件 */ fastButton.setOnClickListener(n

  • 使用Vue.observable()进行状态管理的实例代码详解

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 先看下官网描述,如下图 observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而

随机推荐