Как обратиться изменить переменную из функции-аякса?

Question

[lolrofl01]

При нажатии на кнопку отправляется аякс запрос на сервер. Пока он идет, обрабатывается и тд - не должна исполняться еще раз эта же функция. Т.е. чтобы кнопка становилась disabled на момент работы аякс. А когда ответ придет - снова активировалась. Вроде тривиальная задача, но возникли сложности. Вот код:

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);
                });

Вот конструкция, что идет до axios (this.enable = false) - срабатывает. А та, что внутри axios (this.enable = true) - нет. Из-за этого кнопка срабатывает 1 раз и более не работает. Как это можно исправить?

Answer 1

[WebDev]

Проблема в том, что внутри function своя область видимости и this внутри этой функции - это не тот же самый this, который выше.
Замените

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

на

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

Answer 2

[Сергей Кривошеев]

И лучше используйте .finally для axios. Иначе придётся дважды писать разблокировку кнопки.

https://developer.mozilla.org/ru/docs/Web/JavaScri...