javascript - 使用 Vue.js 的异步/等待 axios 调用

Question

我在设置其中一个时遇到了一些麻烦。我的 Vue.js 应用程序中的值。我相信我要么没有正确理解异步 axios 调用，要么没有理解异步在 Vue.js 中的工作方式。

我有以下三种方法:

updateAvailability(availability) {
    if (availability == true) {
        this.showYourDetails();
    } else {
        this.showBookingDetails();
    }
},
checkAvailability: async function(event) {
    event.preventDefault();
    const availability = await this.handleAvailabilityRequest(event);
    this.loading = true;
    console.log(availability); //This evaluates to undefined
    const availabilityUpdate = await this.updateAvailability(availability);
    this.loading = false;
},
handleAvailabilityRequest: async function(event) {
    event.preventDefault();
    let valid = this.validateFieldsForAvailabilityRequest(); //Ignore this for this particular question, assume valid is always true

    if (valid) { // This is true
        let config = {
            headers: {
                "X-CSRFToken": this.csrfToken,
                "Content-Type": 'application/x-www-form-urlencoded',
            }
        }

        let formData = new FormData();
        let reservationTime = this.reservationHourSelected + ':' + this.reservationMinuteSelected;

        formData.set('type', 'availability_request');
        formData.set('session_name', this.sessionName);
        formData.set('reservation_party_size', this.reservationPartySize);
        formData.set('reservation_date', this.reservationDate);
        formData.set('reservation_time', reservationTime);

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

我的response.data.message 正从我的框架传回 True/true，但似乎我没有从 await this.handleAvailabilityRequest() 返回任何内容> 功能？该帖子肯定会到达服务器，因为日志记录显示了我想要的一切 - 然后在 json 响应上下文中返回 message = true。

所以，我猜……帮帮忙!除了等待 promise 的问题之外，为什么这不起作用完全傻眼了......

Answer 1

问题出在这里:

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

因为您使用的是完整的函数，所以您在.then 中的this 不引用实例化对象。请改用箭头函数，以便 this 是从外部作用域继承的:

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