使用轴和 Vue.js 进行异步/等待调用 - `.then()` 回调未更新 `this.something`答案

【问题标题】：Async/await calls with axis and Vue.js - `.then()` callback not updating `this.something`使用轴和 Vue.js 进行异步/等待调用 - `.then()` 回调未更新 `this.something`
【发布时间】：2019-02-02 02:32:53
【问题描述】：

在我的Vue 应用程序中设置我的this.values 之一时遇到了一点问题。我相信我要么没有正确理解 async axios 调用，要么没有正确理解 async 在axios 中的工作原理。

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

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)。但是，模板上没有任何更改或更新......

我现在假设我错过了一些非常简单的事情！

【问题讨论】：

Axios can't set data的可能重复

标签： vue.js axios

【解决方案1】：

嗯。我想我知道这里发生了什么：因为您使用的是标准function，所以.then() 回调中的this 不是指实例化对象...相反，this. 是调用该函数的上下文 - 使用您的原始代码，即 axios .post 方法返回的 Promise。

相反，我建议使用箭头函数，以便从外部范围继承 this，类似于以下内容：

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

NB 对于箭头函数，this. 总是从外部范围继承，而不是依赖于箭头函数的调用上下文 - 所以你可以参考this.message 或 this.someFunction() 轻松。

【讨论】：

对不起 - 我不确定这个答案与我的问题中的代码有什么不同...？
@GCien 嗨，您缺少箭头函数 =>，如果不使用此函数，您的 this. 将始终引用 post 请求返回的函数，而不是您提供的上下文Vue 应用程序...
是的 - 我现在看到了，模板现在正在更新新消息！

【解决方案2】：

我相信“this”超出了 .then 语句的范围。如果添加行：

var self = this;

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

self.responseMessage = response.data.message;

我认为应该可以。

【讨论】：