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

Question

在 JS 组件中，我有几个方法可以响应，例如，单击事件，然后触发 ajax 请求。为了防止在第一个完成之前多次触发相同的ajax请求（在多次点击同一个按钮的情况下），我通常设置一个标志。所以我的组件中有一个名为working（最初是false）的变量。单击某些内容时，我将其设置为true，当 ajax 请求完成时，我将其设置回false. 如果working === true我阻止任何 ajax 请求。

问题是，如果working === 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;

                    });

            }

        }

    }

}

Answer 1

一个很好的用例Set：使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');                    });            }        }    }}