在Vue项目中，等待所有请求（方法）完成以后执行操作

使用场景

比如一个弹窗需要请求表格跟树组件的数据需要发两个请求，这时我们需要等两个请求完成拿到数据后再去打开弹窗。

多个请求

axios.all([axios.post("/test1"),axios.post("/test2")]).then((test1,test2)=>{
    
    
    console.log('两个接口都执行完毕啦')
})

// 或者这样
function getUserAccount() {
    
    
  return axios.get('/user/12345');
}

function getUserPermissions() {
    
    
  return axios.get('/user/12345/permissions');
}

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

像我这里接口都封装了的话可以这样写

 axios.all([queryMaterialByCode({
    
    }).then((res) => {
    
    
     this.tableDataProp = res.data;
 }),queryMaterialCatalog().then((res) => {
    
    
     this.dataTreeProp = res.data;
 })]).then(()=>{
    
    
     this.batchShow = true;// 打开弹窗
 })

多个方法

function fun1(){
    
    
    return new Promise((resolve, reject) => {
    
    
        /* 你的逻辑代码 */
         resolve('随便什么数据1')
        console.log("1");
    });
},
function fun2(){
    
    
    return new Promise((resolve, reject) => {
    
    
        /* 你的逻辑代码 */
         resolve('随便什么数据2')
        console.log("2");
    });
},
function fun3(){
    
    
    return new Promise((resolve, reject) => {
    
    
        /* 你的逻辑代码 */
         resolve('随便什么数据3')
        console.log("3");
    });
},
/* 调用 */
function run(){
    
    
    Promise.all([
        this.fun1(),
        this.fun2(),
        this.fun3()
    ]).then(res => {
    
    
        /* 你的逻辑代码 */
        console.log("run");
    })
}