Асинхронные / ожидающие вызовы с осью и Vue.js - `.then ()` обратный вызов не обновляет `this.something`

Question

У меня небольшая проблема с настройкой одного из this.values в моем приложении Vue. Я полагаю, что либо неправильно понимаю асинхронные вызовы axios, либо как асинхронность работает в axios.

В моем приложении Vue есть следующий axios метод post:

postRequest: async function(event) {
    event.preventDefault();
    let config = {
        headers: {
            "X-CSRFToken": this.csrfToken,
            "Content-Type": 'application/x-www-form-urlencoded',
        }
    }

    let formData = new FormData();

    formData.append('data', someData);

    await axios.post('{{ request_absolute_uri }}', formData, config).then(function(response) {
            this.responseMessage = response.data.message;
        }).catch(function(error) {
            console.log(error);
        });
    }
    console.log(this.responseMessage)
    return this.responseMessage;
}

Мой response.data.message передается обратно из моего фреймворка как True / true, но, похоже, я ничего не возвращаю из функции postRequest? Пост определенно попадает на сервер, так как в журнале показывается все, что я хочу, а затем возвращается обратно message = true в контексте ответа json (используя console.log(this.responseMessage) непосредственно перед возвратом того же значения. Однако ничего в шаблоне не изменяется или не обновляется из этого ....

Я предполагаю, что в этот момент я упустил нечто невероятно простое!

Answer 1

Я полагаю, что "это" выходит за рамки внутреннего утверждения .then. Если вы добавите строку:

var self = this;

в верхней части функции postRequest, а затем при назначении ответного сообщения используйте:

self.responseMessage = response.data.message;

Я думаю, это должно сработать.

Answer 2

Хммм. Я думаю, что я знаю, что здесь происходит: поскольку вы используете стандартный function, ваш this в обратном вызове .then() не ссылается на экземпляр объекта ... вместо этого this. является вызовом контекст этой функции - с вашим исходным кодом, т.е. Promise, возвращаемым методом axios .post.

Вместо этого я бы посоветовал вместо этого использовать функцию стрелки, чтобы this наследовался от внешней области видимости, что-то вроде этого:

await axios.post('{{ request_absolute_uri }}', formData, config).then( (response) => {
  this.responseMessage = response.data.message;
})

NB Для функций со стрелками this. всегда наследуется от внешней области видимости, а не в зависимости от вызывающего контекста функции стрелки - поэтому вы можете ссылаться на this.message или this.someFunction() с легкостью.