Javascript 每个方法在等待ajax时阻止操作的最佳实践？

在JS组件中，我有几个方法可以响应，例如，单击事件，然后触发ajax请求。为了防止同一个ajax请求在第一个请求完成之前多次触发（如果在同一个按钮上多次单击），我通常设置一个标志。因此，我的组件中有一个名为

working

（最初是

false

）的变量。当单击某个内容时，我将其设置为

true

，当ajax请求完成时，我将其设置回

false

。如果

工作===true

我将阻止任何ajax请求

问题是，如果

工作===true

，组件中的所有操作都被阻止，因此不能同时单击两个对象。因此，用户在单击“喜欢”之前不能单击“保存”

在代码示例中，

respondToClickB

将被阻止，直到

respondToClickA

被解析

我怎样才能更好地处理这个问题

提前谢谢你

export default {
    data: function() {
        return {
            working: false
        }
    },
    methods: {
        respondToClickA: function() {
            let self = this;
            if(!self.working)
            {
                self.working = true;
                axios.get('/ajax')
                    .then(function(response){
                        self.working = false;
                    });
            }
        },
        respondToClickB: function() {
            let self = this;
            if(!self.working)
            {
                self.working = true;
                axios.get('/ajax')
                    .then(function(response){
                        self.working = false;
                    });
            }
        }
    }
}

一个很好的用例：将

self.working

设置为

Set

对象，并向其添加/删除值

Set

就像一个数组，但它没有顺序

export default {
    data: function() {
        return {
            working: new Set()
        }
    },
    methods: {
        respondToClickA: function() {
            let self = this;
            if(!self.working.has('a'))
            {
                self.working.add('a')
                axios.get('/ajax')
                    .then(function(response){
                        self.working.delete('a');
                    });
            }
        },
        respondToClickB: function() {
            let self = this;
            if(!self.working.has('b'))
            {
                self.working.add('b');
                axios.get('/ajax')
                    .then(function(response){
                        self.working.delete('b');
                    });
            }
        }
    }
}

一个很好的用例：将

self.working

设置为

Set

对象，并向其添加/删除值

Set

就像一个数组，但它没有顺序

export default {
    data: function() {
        return {
            working: new Set()
        }
    },
    methods: {
        respondToClickA: function() {
            let self = this;
            if(!self.working.has('a'))
            {
                self.working.add('a')
                axios.get('/ajax')
                    .then(function(response){
                        self.working.delete('a');
                    });
            }
        },
        respondToClickB: function() {
            let self = this;
            if(!self.working.has('b'))
            {
                self.working.add('b');
                axios.get('/ajax')
                    .then(function(response){
                        self.working.delete('b');
                    });
            }
        }
    }
}

---

完美的解决方案！非常感谢。完美的解决方案！非常感谢你。