How does the vue project prevent two requests that are clicked very quickly and then submitted

when submitting data similar to a form, two requests will appear when you click twice in a row. Is there a global js at the front end to control this?

Vue.js
Mar.20,2021

scenario 1: declare a variable and click the gray submit button. Wait for the end of the interface call to release the button. 

<template>
<div>
    <!--  -->
    <button v-if="canSave" @click="save"></button>
    <button v-else disabled></button>
</div>
</template>
<script>
export default {
    data(){
        return {
            canSave: true,
        }
    },
    methods: {
        save(){
            if(!canSave){
                return;
            }
            this.canSave = false;
            // AJAX  this.canSave = true;
        },
    }
}
</script>

Plan 2: add anti-shaking. Put several previous favorite links:
JavaScript function throttling and function de-trembling application scenarios
underscore function
underscore function throttling

JavaScript
JavaScript underscore

  1. debounce and throttle are the most widely used at present. For more information, you can see the collection upstairs.
  2. wants to make sure that logically there are no requests submitted at the same time, there are also many npm searches for "mutex";

  3. or I have also written a simple version that wraps the callback with the following function. If the previous request has not been completed, the new request will be returned with the old one. In this case, the callback returns Promise

    . 
     

     actually all interface requests have this requirement, so you can encapsulate a proxy layer for ajax 
    

     the proxy layer can do two things 
    

      

    1.  the cache API returns data, which can be cached to sessionstorage, or to memory. The same request accesses the cache first 
      2. 

    2.  add status to each request interface, unrequested, in progress, completed. Request the interface when it is not requested, and set the status of the interface to the request; request the interface when the request is in progress, save the callback, store the data in the cache after the interface data is returned, and call back together; request the interface to read the data directly from the cache when it is finished, and no longer request the interface 
      3. 

    

     in this way, not only vue projects, not just post or submit forms, all interface requests have the capabilities you need.

Previous: The zsh run command of ubuntu always reports an error.

Next: How to turn on the switch of my mobile phone?

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-1b3afcd-2b5be.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-1b3afcd-2b5be.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?