How to apply to change a variable from an ajax function?

Question

JavaScript

When the button is clicked, an Ajax request is sent to the server. While it is running, being processed, etc., the same function should not be executed again. Those. so that the button becomes disabled at the time of Ajax operation. And when the answer comes - activated again. It seems like a trivial task, but there were difficulties. Here is the code:

data: {
        enable: true
    },


        sendMessage: function () {

            if( this.enable === true ) {
                this.enable = false;

                window.axios.defaults.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');

                axios.post('/url', {

                })
                .then(function (res) {
                  
                    this.enable = true;
                })
                .catch(function (error) {
                    console.error(error);
                });

Here is the construction that goes before axios (this.enable = false) - it works. But the one inside axios (this.enable = true) is not. Because of this, the button works 1 time and does not work anymore. How can this be fixed?

Answer 1

The problem is that a function has its own scope and this inside that function is not the same this as above.
Replace

.then(function (res) {
    this.enable = true;
})

on the

.then(res => {
    this.enable = true;
})

Answer 2

And better use .finally for axios. Otherwise, you will have to write the button unlock twice.
https://developer.mozilla.org/en/docs/Web/JavaScript...