Javascript 使用Vue.js异步/等待axios调用
我在设置我的其中一个时遇到了一点麻烦。我的Vue.js应用程序中的值。我认为我要么没有正确理解async axios调用,要么没有正确理解Vue.js中async的工作原理 我有以下三种方法:Javascript 使用Vue.js异步/等待axios调用,javascript,asynchronous,vue.js,async-await,axios,Javascript,Asynchronous,Vue.js,Async Await,Axios,我在设置我的其中一个时遇到了一点麻烦。我的Vue.js应用程序中的值。我认为我要么没有正确理解async axios调用,要么没有正确理解Vue.js中async的工作原理 我有以下三种方法: updateAvailability(availability) { if (availability == true) { this.showYourDetails(); } else { this.showBookingDetails(); }
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的形式传回,但似乎我没有从返回任何内容,请等待。handleAvailabilityRequest()
函数?日志显示了我想要的一切,这篇文章肯定会击中服务器——然后在json响应上下文中返回message=true
所以,我想。。。救命啊!除了等待承诺的问题之外,完全无法理解为什么这不起作用……问题在于:
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);
});
因为您使用的是一个完善的函数
,所以中的this
不会引用实例化的对象。改为使用箭头函数,以便从外部作用域继承此
:
await axios.post('{{ request_absolute_uri }}', formData, config)
.then((response) => {
this.availabilityMessage = response.data.message;
}).catch((error) => {
this.availabilityMessage = false;
console.log(error);
});
如果您使用的是AsyncWait,为什么要使用Promissions模式呢。这将删除回调的使用,并且此
绑定将丢失
你可以这样做
handleAvailabilityRequest: async function (event) {
event.preventDefault();
...
try{
let response = await axios.post('{{ request_absolute_uri }}', formData, config)
this.availabilityMessage = response.data.message;
}catch(error) {
this.availabilityMessage = false;
console.log(error);
};
}
return this.availabilityMessage;
}
使用async/await时,可以使用try/catch
块来处理错误。您应该在此处使用箭头函数,否则将无法获得正确的上下文。Vivick是对的,或者在错误回调函数的末尾添加.bind(this)
。由于您正在更新“this”availabilityMessage,我不认为在请求中返回它有什么意义。取而代之的是在以后的调用中检查this.availabilityMessage,而不是availability。您还将async Wait与标准承诺混合在一起。这可能会导致我发现的问题。要么用一个,要么用另一个。在这些情况下,我更喜欢async/await,但我也发现有时我必须使用Promise.all on Waiting调用。“如果使用async await,为什么要使用Promissions?”-因为async
函数返回承诺,而await
只能等待返回承诺的函数。axios确实返回承诺promise@Quentin我们可以等待承诺得到解决,然后返回响应
“finally”是一个很好的方法,可以在尝试捕获后进行清理。我一直在用它,这是一个更好的答案。async/await是游戏规则的改变者。为了承诺而避免那些链式的函数无疑会使这个过程更干净。这就像一种魅力。经过一些修改,外部范围现在正在改变。出于兴趣,为什么这样做?对于标准函数,这个
在任何函数中都是该函数的调用上下文-对于原始代码,这就是返回的承诺
。对于arrow函数,this
始终从外部作用域继承,而不是依赖于arrow函数的调用上下文。如果必须使用function(),则始终可以使用bind绑定父上下文(this)<代码>函数(){}.bind(this)