How to avoid user critical strikes in your vue+acios project?

at present, the project has encountered a minor problem:
when the network speed is too slow, the user clicks the button unresponsive when the user submits or modifies the operation, so the user will continue to click a few more times. At this time, the front-end page will send a lot of requests to the backend, resulting in a series of problems.
there are two solutions I can think of so far.
the first is that the user clicks a button to add the loading, data request and then removes the loading. But there are two minor problems with this.
(1) if it"s a button in the list, you can"t add loading

.

clipboard.png

2loadingloading

clipboard.png

second: use axios"s cancel, to execute the same request only once, and cancel all the redundant ones.
my own writing method has not been perfect, and I will encounter some problems if I find a demo on the Internet.

to sum up, I am still a little confused. I have a good idea for the trouble passing by. =

Vue.js
Jun.30,2021

this is simple:
set a variable of type boolean in the component, default to false

add judgment before http request 

!isDone &&  this.httpService.get('',(data) => {
    //
    if (data!=false) {
        this.isDone = true;
    }
})

vue is written in a similar way, just take a variable to judge. If you have already got the data, you are not allowed to send any more requests

.

http://element-cn.eleme.io/-sharp/zh-CN/component/loading
plus loading, who says the button cannot be added? you must always execute your function. Load loading , ajax callback and remove loading after the first sentence of the function

.

this adds a global request loading, but there will still be a critical strike behavior, and then I add a custom instruction to control the button is-disabled attribute to control the user critical strike behavior

import Vue from 'vue';
Vue.directive (' noMoreClick', {

) 
inserted(el, binding) {
    el.addEventListener('click', e => {
        el.classList.add('is-disabled');
        el.disabled = true;
        setTimeout(() => {
            el.disabled = false;
            el.classList.remove('is-disabled');
        }, 3000)
    })
}

});

it is better to add a status identification to each request method when encapsulating axios

Previous: Vue, is suddenly unable to hot update, the error is as follows

Next: How to record the information of Rest API interface

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5f037-4580a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5f037-4580a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?