等所有接口异步调用完成后再执行如何实现使用async await

逃离我推掉我的手 2023-10-07 19:53 6阅读 0赞

**需求：initChart()初始化图表方法要在前面四个异步调用全部完成获取到数据后再执行~**  
话不多说，直接上代码：

created() {
     	this.fetchAllInterface();
     },
     methods: {
         async fetchAllInterface() {
             await this.getUserTotal();
             await this.getBookTotal();
             await this.getSeatItemTotal();
             await this.getRentalTotal();
             this.initChart();
         },
         initChart() {
             let myChart = echarts.init(document.getElementById('main'));
             // 绘制图表
             myChart.setOption({
                 title: {
                     text: '统计'
                 },
                 tooltip: {
                     trigger: 'axis'
                 },
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
                 xAxis: {
                     type: 'category',
                     data: ['今日借阅数', '今日预约数', '图书数', '用户数'],
                     axisTick: {
                         alignWithLabel: true
                     }
                 },
                 yAxis: {
                     type: 'value'
                 },
                 series: [
                     {
                         type: 'bar',
                         barWidth: '25%',
                         data: [
                             {
                                 value: this.rentalTotal,
                                 itemStyle: { color: '#5470c6' }
                             },
                             {
                                 value: this.seatItemTotal,
                                 itemStyle: { color: '#91cc75' }
                             },
                             {
                                 value: this.bookTotal,
                                 itemStyle: { color: '#fac858' }
                             },
                             {
                                 value: this.userTotal,
                                 itemStyle: { color: '#ee6666' }
                             }
                         ]
                     }
                 ]
             })
         },
         getUserTotal() {
             return this.$ajax.post("/user/total").then((response)=>{
                 let resp = response.data;
                 if(resp.code === 0){
                     this.userTotal = resp.data;
                 }
             });
         },
         getBookTotal() {
             return this.$ajax.post("/book/total").then((response)=>{
                 let resp = response.data;
                 if(resp.code === 0){
                     this.bookTotal = resp.data;
                 }
             });
         },
         getSeatItemTotal() {
             return this.$ajax.post("/seat/dayTotal").then((response)=>{
                 let resp = response.data;
                 if(resp.code === 0){
                     this.seatItemTotal = resp.data;
                 }
             });
         },
         getRentalTotal() {
             return this.$ajax.post("/book/dayTotal").then((response)=>{
                 let resp = response.data;
                 if(resp.code === 0){
                     this.rentalTotal = resp.data;
                 }
             });
         }
     }

**注意点： axios异步调用记得return返回，要不然await不生效。**