zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

接口执行async异步 实现 如何 调用 所有
2023-09-11 14:21:24 时间

需求: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不生效。