【vue】使用Promise方法保证按顺序执行

使用Promise方法可以叠加.then方法，来保证执行顺序。

queryTasksNum(){
      // TODO: 如果和queryImg都放在mounted里，会比后者执行得早
      // 查询未标记数量、已标记数量、已复核数量
      let that = this;
      var cntIm0 = 0;
      var cntIm1 = 0;
      var cntIm3 = 0;

      // TODO：如果是同步发送可能会出现问题
      function getNumIm0(){
        return new Promise(function(resolve){
          axios({
            method:'post',
            url:'/labelapi/queryTask',
            data: {
              "query_status": Number(localStorage.getItem('ms_userrole')) - 1
            },
            // headers:{"Content-Type":"multipart/form-data;"}
          }).then(function (response) {
            console.log('queryimg:', response.data)

            cntIm0 = response.data.assignnum;
            resolve(cntIm0);
          }).catch(function (error) {
            console.log(error);
          });
        });
      }
      function getNumIm1(){
        return new Promise(function(resolve){
          axios({
            method:'post',
            url:'/labelapi/queryTask',
            data: {
              "query_status": Number(localStorage.getItem('ms_userrole')),
              // 此处每页返回6个图

            },
            // headers:{"Content-Type":"multipart/form-data;"}
          }).then(function (response) {
            console.log('queryimg:', response.data)
            cntIm1 = response.data.assignnum;
            resolve(cntIm1);
          }).catch(function (error) {
            console.log(error);
          });
        });

      }
      function getNumIm3(){
        return new Promise(function(resolve){
          axios({
            method:'post',
            url:'/labelapi/queryTask',
            data: {
              "query_status": Number(localStorage.getItem('ms_userrole')) + 2,
              // 此处每页返回6个图

            },
            // headers:{"Content-Type":"multipart/form-data;"}
          }).then(function (response) {
            console.log('queryimg:', response.data)
            cntIm3 = response.data.assignnum;
            resolve(cntIm3);
          }).catch(function (error) {
            console.log(error);
          });
        });
      }
      getNumIm0()
      .then(function(data){
        console.log('cntIm0', data);
        return getNumIm1();
      })
      .then(function(data){
        console.log('cntIm1', data);
        return getNumIm3();
      })
      .then(function(data){
        console.log('cntIm3', data);

        // TODO：最好还是放在外边，想办法确保异步顺序
        // cntIm2 is error
        // var cntIm2 = that.imageList.length;
        var cntIm2 = that.imglength;
        console.log('queryTasksNum', cntIm0, cntIm1, cntIm2, cntIm3);
        that.completed=cntIm1 + cntIm2 + cntIm3;
        that.totalMission=cntIm0 + cntIm1 + cntIm2 + cntIm3;
        that.followed=cntIm2 + cntIm3;
        that.totalFollow=cntIm1 + cntIm2 + cntIm3;
        that.missionCompleted = ((cntIm1 + cntIm2 + cntIm3) / (cntIm0 + cntIm1 + cntIm2 + cntIm3) * 100).toFixed(2);
        if(isNaN(that.missionCompleted)){
          that.missionCompleted = 100;
        }
        that.followUpCompleted = ((cntIm2 + cntIm3) / (cntIm1 + cntIm2 + cntIm3) * 100).toFixed(2);
        if(isNaN(that.followUpCompleted)){
          that.followUpCompleted = 100;
        }
      });
    },