我的设置有点问题.我的Vue中的价值观.js应用程序.我认为我要么没有正确理解async axios调用,要么没有正确理解async在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()函数返回任何内容?当日志(log)显示我想要的一切时,帖子肯定会击中服务器——然后在json响应上下文中返回message=true.

所以,我想...帮助除了等待promise 的问题之外,我完全目瞪口呆地想知道为什么这不起作用...

推荐答案

问题在于:

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);
});

因为您使用的是一个完整的function,所以.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);
});

Vue.js相关问答推荐

元素不会对react 性props 的更改做出react

在 Vuejs 中更新 Chartjs 图表数据集

vue js导航到带有问号的url

在 Ajax 函数中访问 Vue.js 组件属性

将函数作为属性传递给 Vue 组件

VuetifyJS:如何摆脱 v-stepper 组件的提升?

Vue 单元测试:您正在开发模式下运行 Vue?

在 jest document.querySelector 中测试 vue 组件期间始终返回 null

Vue watch 意外调用了两次

Vue 3 如何获取有关 $children 的信息

Polyfill for ie

使用 Vee-Validate 在提交时验证子输入组件

Jest错误找不到模块....

Vue:如何在按钮单击时调用 .focus()

Vue Cli 3 不允许我在 Webpack 中处理 SVG

如何将数据传递给 Vue.js 中的路由视图

基本 vue.js 2 和 vue-resource http 获取变量赋值

带有 Google Auth Signin 的 Vuejs 全局函数

v-bind:class 的 Vue.js 计算(computed)属性

将它们分开时将 Django 的 csrf_token 放入 Vuejs