问题

首先声明此博客只适合新手观看，对async、await实现axios同步请求的理解只适合应用层级别的学习，没有async、await实现axios同步请求实现的底层代码以及逻辑讲解。
下面介绍一下我遇到的问题，我今天在前端画一个柱形图的时候，因为axios为异步请求，所以当我的柱形图渲染的时候axios请求还没有将查询到后端的数据返回来。这时候柱形图每个柱子的数据也就会显示为0。

解决问题思路

期初我本来打算使用vue周期的加载顺序来解决问题，但是我发现这个是一个失败的选择。所以不得已我只能选择同步请求。但是axios和ajax不一样的没有设置同步请求和异步请求的属性。
然后在网上查找资料我发现axios可以通过async和await来实现同步请求。async是用来修饰方法的，声明该方法为异步请求方法；await只能在async修饰的方法中使用，它的功能和同步请求的功能是一样，当await修饰一行代码的时候，前端的加载走到这行代码的时候就会变成同步加载，只有等到这行代码执行完成之后才会执行后面的代码。

我的代码详解

首先页面加载时获取数据，获取数据的请求方法如下。如果想要这个方法同步方法前必须加上async。
下面是我们调用created钩子函数获取调用getNotInfo方法获取后端数据并且绘制柱形图的方法。
在获取数据的方法前面我们需要加上await字段来修饰我们需要调用的方法。这样执行代码的时候，只有等待执行完this.getNotInfo()方法之后才会执行下面的代码。

async created(){
   //获取异常信息数据
    await this.getNotInfo()
   //获取已发送信息数据
    await this.getOkInfo()
    // 调用绘制图表的方法
    this.draw();
  }

此方法只是我前端请求后端数据，并且将请求的数据赋值给前端的字段。并且如果我们希望此方法为同步加载，我们需要在这个方法前面加上async

async getNotInfo(){
        const url='http://localhost:8090/omo_message_dev/messageStatus/queryCurrentStudentStatusMessage/'+this.$route.query.id+"/异常?"+"pageNo="+this.currentPage+'&pageSize='+this.pageSize
    return this.$axios.get(
       url,
       )
    .then((res)=>{
     this.tableData=res.data.data.list;//将数据赋值给前端字段
     this.sendNot=this.tableData.length;//将数据赋值给前端字段
    });
    },