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

Posted 2023-02-22

【中文标题】使用轴和 Vue.js 进行异步/等待调用 - `.then()` 回调未更新 `this.something`

【英文标题】：Async/await calls with axis and Vue.js - `.then()` callback not updating `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的可能重复

【参考方案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;

我认为应该可以。