vue 接口访问——鼠标快速点击，多次访问问题

Question

场景如下：
表单填写完成后，快速点击两下提交按钮，vue中调用了2次该接口访问，这个问题，有没有高手有解决办法的，最好能够一劳永逸，因为一个项目有很多个这样的场景。在线等待。

我想要达到的目的：
1.快速点击提交按钮是用户误操作，因此，只调用一次接口。
2.由于类似的提供功能较多，是否有办法能够有个公共的处理方法，统一处理（这里我暂时没有思路）。

Answer 1

请求方法加锁。

以下代码来自于一个旧回答，题主要求是不同组件同时调相同接口均能返回，但只发一个请求。

你的需求改改就行。

const pendingMap = {}
// const evnetBus = new Vue();

function request(url, data) {
    return new Promise((resolve, reject) => {
        // url和data做种子生成key
        const key = btoa(url + JSON.stringify(data)); 
        
        // 已存在相同请求,加监听，并阻止继续执行
        if(pendingMap[key]){
            /* const onCallback = res => {
                eventBus.$off(key, onCallback);
                const handler = res.success ? resolve : reject;
                handler(res.result);
            }
            
            eventBus.$on(key, onCallback);*/
            return reject()
        }
        
        // 正常第一次请求
        pendingMap[key] = true;
        axios(url, data)
            .then(res => {
                pendingMap[key] = false;
                const result = res.data;
                // eventBus.$emit(key, {success: true, result});
                resolve(result);
            })
            .catch(err => {
                pendingMap[key] = false;
                // eventBus.$emit(key, {success: false, result: err});
                reject(err);
            })
    })

}

没有封装请求方法的，可以劫持xhr来避免多处修改

Answer 2

点击后将button的disabled设置为true,接口成功后再设置为false。

使用element-ui的话， 可以设置'loading',给button加个加载圈圈，接口调用成功后loading设置为false

Answer 3

可以搜索一下 防抖 和 截流

---

更新了问题, 补充一下

快速点击提交按钮是用户误操作，因此，只调用一次接口。

这种情况, 一般是给按钮加一个 锁, 用户点击第一次就上 锁 , 请求成功后再解锁. 可以配合 截流 函数, 规定多少时间内只能提交一次.
这篇文章介绍了防抖和截流. 防抖你应该用不上. 截流可以拿来用用

Answer 4

以前碰到这样类似的问题。
第一次点击以后,给按钮添加disabled，处理结束以后再删除disabled

Answer 5

可以在封装那里截的，保存上一次的请求信息，然后同一时间段请求的信息一样就返回 return false;axios可以做全局拦截的