Vue中使用async-await处理异步请求函数的问题与示例
不使用async-await对异步请求进行同步化使用async-await对异步请求进行同步化结论:使用async-await将使得整个函数延后执行,即同步的代码执行完毕后再执行;对于async函数的内部,使用了await的地方,会先执行,然后再执行函数内await之后的同步代码。不使用async-await的函数,将先执行函数内部的同步函数,执行完同步后,跳出该函数,继续...
·
不使用async-await对异步请求进行同步化
使用async-await对异步请求进行同步化
结论:
使用async-await将使得整个函数延后执行,即同步的代码执行完毕后再执行;对于async函数的内部,使用了await的地方,会先执行,然后再执行函数内await之后的同步代码。
不使用async-await的函数,将先执行函数内部的同步函数,执行完同步后,跳出该函数,继续执行其它同步函数,待同步函数执行完后,再回到异步请求函数内部执行
图中示例代码:
methods:{
//这里使用
async getUserInfo(){
this.isShow = true;
await this.$http({
url : this.baseUrl+'uri=info',
method:'get',
})
.then((res)=>{
console.log('start');
this.isShow = false;
this.name = res.data.name;
})
.catch((err)=>{
console.log('错误')
});
console.log('last')
}
},
mounted(){
console.log('open');
this.getUserInfo();
console.log('end')
}
methods:{
//这里使用
getUserInfo(){
this.isShow = true;
this.$http({
url : this.baseUrl+'uri=info',
method:'get',
})
.then((res)=>{
console.log('start');
this.isShow = false;
this.name = res.data.name;
})
.catch((err)=>{
console.log('错误')
});
console.log('last')
}
},
mounted(){
console.log('open');
this.getUserInfo();
console.log('end')
}
更多推荐
已为社区贡献3条内容
所有评论(0)