vue中使⽤async、await实现axios同步请求（代码流程详解）
问题
⾸先声明此博客只适合新⼿观看，对async、await实现axios同步请求的理解只适合应⽤层级别的学习，没有async、await实现axios同步请求实现的底层代码以及逻辑讲解。
下⾯介绍⼀下我遇到的问题，我今天在前端画⼀个柱形图的时候，因为axios为异步请求，所以当我的柱形图渲染的时候axios请求还没有将查询到后端的数据返回来。这时候柱形图每个柱⼦的数据也就会显⽰为0。
解决问题思路
期初我本来打算使⽤vue周期的加载顺序来解决问题，但是我发现这个是⼀个失败的选择。所以不得已我只能选择同步请求。但是axios和ajax不⼀样的没有设置同步请求和异步请求的属性。
然后在⽹上查资料我发现axios可以通过async和await来实现同步请求。async是⽤来修饰⽅法的，声明该⽅法为异步请求⽅法；await 只能在async修饰的⽅法中使⽤，它的功能和同步请求的功能是⼀样，当await修饰⼀⾏代码的时候，前端的加载⾛到这⾏代码的时候就会变成同步加载，只有等到这⾏代码执⾏完成之后才会执⾏后⾯的代码。
我的代码详解
⾸先页⾯加载时获取数据，获取数据的请求⽅法如下。如果想要这个⽅法同步⽅法前必须加上async。
下⾯是我们调⽤created钩⼦函数获取调⽤getNotInfo⽅法获取后端数据并且绘制柱形图的⽅法。
在获取数据的⽅法前⾯我们需要加上await字段来修饰我们需要调⽤的⽅法。这样执⾏代码的时候，只有等待执⾏完NotInfo()⽅法之后才会执⾏下⾯的代码。
async created(){
//获取异常信息数据
NotInfo()
//获取已发送信息数据
OkInfo()
// 调⽤绘制图表的⽅法
await和async使用方法this.draw();
}
此⽅法只是我前端请求后端数据，并且将请求的数据赋值给前端的字段。并且如果我们希望此⽅法为同步加载，我们需要在这个⽅法前⾯加上async
async getNotInfo(){
const url='localhost:8090/omo_message_dev/messageStatus/queryCurrentStudentStatusMessage/'+this.$route.query.id+"/异常?"+"pageNo="+t his.currentPage+'&pageSize='+this.pageSize
return this.$(
url,
)
.then((res)=>{
this.tableData=res.data.data.list;//将数据赋值给前端字段
this.sendNot=this.tableData.length;//将数据赋值给前端字段
});
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。