VUE中axios按顺序执行

最新推荐文章于 2023-11-30 10:30:36 发布

么么哒思密达

最新推荐文章于 2023-11-30 10:30:36 发布

阅读量968

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46410916/article/details/129579520

版权

VUE中axios按顺序执行

废话不多说，直接上代码
记录使用

async query() {
      //method1执行完成后执行method2
      await this.method1();
      await this.method2();
    },
    //必须返回一个Promise
    method1() {
      return new Promise((resolve, reject) => {
        console.log(1);
        axios.get("/api/device/query/online", {}).then((res) => {
          console.log("method1");
          console.log(res);
          this.tableData = res.data;
          resolve();
        });
      });
    },
    //必须返回一个Promise
    method2() {
      return new Promise((resolve, reject) => {
        console.log(3);
        axios.post("https://www.baidu.com:6316/getList", {params:{"provinceId":0}}).then((res) => {
          console.log("method2");
          console.log(res);
          resolve();
        });
      });
    },

第二种写法，原理一样
async drawLine (){
      let that = this;
      let opinionData;
      let data1;//=接收手机端数据
      await this.$axios({
        method: 'get',
        url: '/api/device/query/online'
      }).then(function (res) {
        //返回在线数据分析res.data.aa
        that.opinionData=res.data.data.aa;
        console.log("第一次请求")
      })
      await that.$axios({
        method: "post",
        url: `https://www.baidu.com:6316/getList`,
        data : {
          provinceId: "",
        }
      }).then(function (res) {
        console.log("第二次请求")
        console.log("请求手机端数据");
        let mobileDataList = res.data.content;
        mobileDataList = that.editMobileList(mobileDataList);
        debugger
        console.log("mobileDataList");
        console.log(mobileDataList);
        that.opinionData[0]["value"] =  that.opinionData[0]["value"]+mobileDataList.online;
        that.opinionData[1]["value"] =  that.opinionData[1]["value"]+mobileDataList.offline;

      });
      this.myChart3 = echarts.init(document.getElementById('OnlineRate'))
      console.log("开始绘制")
      this.myChart3.setOption({
        title:{
          text:'监控设备在线率',
          subtext:'',
          x:'left'
        },
        grid:{containLabel:true},
        tooltip:{
          trigger:'item',
          formatter: '{b} : {c} ({d}%)'
        },
        label:{
          show: true,
          formatter(a) {
            let { name, value } = a;
            return name + '：' + value ;
          },
        },
        legend: {
          orient: 'vertical',
          icon: 'roundRect',
          align: 'left',
          x: 'right',
          y: 'bottom',
        },
        series:[
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            center: ['40%', '50%'],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function (params) {
                // 自定义颜色
                let colorList = ['red','#3F8FFF', '#6DC8EC', '#1FC48D']
                return colorList[params.dataIndex]
              }
            },
            data: this.opinionData
          }
        ]
      })
    },