Question

在this.values应用程序中设置自己的Vue时遇到了一些麻烦。我相信我不是正确地理解了异步axios调用，还是在axios中异步是如何工作的。

我的axios应用程序中具有以下Vue发布方法：

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函数返回任何信息吗？该日志肯定会到达服务器，因为日志记录显示了我想要的一切-然后在json响应上下文中返回message = true（在返回相同值之前直接使用console.log(this.responseMessage)。但是，模板上的任何内容都没有更改或更新） ....

在这一点上，我假设我错过了非常简单的事情！

Answer 1

嗯。我想我知道这是怎么回事：因为您使用的是标准function，所以this回调中的.then()并未引用实例化的对象……相反，{ {1}}是使用原始代码（即axios this.方法返回的Promise）调用该函数的上下文。

相反，我建议改用箭头函数，以使.post从外部范围继承，类似以下几行：

this

NB 使用箭头函数，await axios.post('{{ request_absolute_uri }}', formData, config).then( (response) => { this.responseMessage = response.data.message; })始终从外部范围继承，而不是取决于箭头函数的调用上下文-因此您可以轻松引用this.或this.message。

Answer 2

我认为.then语句中的“ this”超出范围。如果您添加以下行：

var self = this;

位于postRequest函数的顶部，然后在分配响应消息时使用：

self.responseMessage = response.data.message;

我认为应该可以。

使用axis和Vue.js进行异步/等待调用-.then（）回调不会更新`this.something`

2 个答案: