vue for循环调用axios 根据返回数据创建新数组延迟问题

Question

          let mindex = 0 ;
          let sum = this.multipleSelection.length ;
          let successNum = 0 ;

          for(const item of this.multipleSelection){
            jokeNum++
            axios
              .get(MODULE_PATH.GAL_PATH + '/init-rule/init',{
                params:{
                  admCode:item.admCode,
                  eleCode:item.eleCode,
                  fiscal:this.fiscal
                }
              })
              .then(({ data,code }) => {
                flag = true
                if(code=='200'){
                  successNum++  
                  console.log(successNum)   // 后打印
                }else{
                  failNum++;
                  console.log(failNum)
                }
              })
              .catch((err) => {
                this.$message({
                  type: 'error',
                  message: err.msg
                });
              });
          }
          console.log(jokeNum)
          console.log(flag)
          console.log(this.successNum)     //先打印出来了

代码如上，在一个for循环里面发出请求，然后根据返回的数据将符合条件的数据存到一个新变量，但是目前在for循环结束以后，先打印了，新变量还是空的，在for循环条件判断那里反而是最后打印的，求指教如何才能在循环结束以后拿到正确的新变量？

Answer 1

了解一下多个请求并发 axios.all()

Answer 2

你这是异步请求，可以去了解下Event Loop
关于这个场景，可以使用

axios.all([]).then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
}));

Answer 3

• 浏览器js执行是单线程，执行的都是同步任务
• 遇到像请求这种任务会拿出去单独执行，js线程继续执行他的任务
• 所以for循环和下面的console是先执行完的，当请求响应后才会把回调放到js线程最后执行，这是个异步问题，可以搜一下事件循环，任务队列，event Loop，js单线程异步等关键字了解下
• 你可以把获取到数据后要执行的相关逻辑放到请求的回调函数里执行

Answer 4

async/await 了解一下