vue中运用Promise.all方法

在实际工作中，经常是所有请求都返回结果正确才能进行下一步；如果用一个接口，数据返回特别慢，多个接口返回就用到了Promise.all方法；

一、Promise知识：

1.Promise是一个构造函数，调用时用new Promise的方法；
2.new Promise接收两个参数 resolve(成功) 和 reject(失败);
3.Promise 对象有三种状态：未完成（pending）、完成（fulfilled）和失败（rejected）。
4.Promise提供了两个回调函数，then和catch。

二、Promise运用：

Promise未完成状态

let reslut = new Promise((resove,reject)=>{
    let num = 5;
    if(num>3){
      return setTimeout(()=>{
        resove(num)
      },3000)
    }else{
      return reject(3)
    }
})
console.log(reslut); //打印出来是：Promise {<pending>}
reslut.then(res=>{
    console.log(res); //等待3s;打印5
}).catch(res=>{
    console.log(res); //不执行，因为返回是成功；
})

Promise完成状态

 let reslut = new Promise((resove,reject)=>{
    let num = 5;
    if(num>3){
      return resove(num)
    }else{
      return reject(3)
    }
})
console.log(reslut); //打印出来是：Promise {<fulfilled>: 5} 
reslut.then(res=>{
    console.log(res); //因为5>3,返回成功的，打印5
}).catch(res=>{
    console.log(res); //不执行，因为返回是成功；
})

Promise失败状态

 let reslut = new Promise((resove,reject)=>{
    let num = 2;
    if(num>3){
      return resove(num)
    }else{
      return reject(3)
    }
})
console.log(reslut); //打印出来是：Promise {<rejected>: 3}
reslut.then(res=>{
    console.log(res); //不执行，因为返回失败；
}).catch(res=>{
    console.log(res);  //因为2>3,返回失败的，打印3
})

三、Promise.all的运用；

1.Promise.all所有成功处理方式
Promise.all() 括号里面是异步操作的数组，当所有返回成功就会执行.then操作，然后.then的res也是个数组,它是异步操作的返回值；

Promise.all([Promise.resolve(2),Promise.resolve(3),Promise.resolve(4)]).then(res=>{
    //这里是所有Promise成功的操作
    console.log(res); //打印出来是[2, 3, 4]
}).catch(res=>{
    //这里不会执行；
});

2.Promise.all不成功 只要有一个返回不成功，会执行到.catch,.then就不执行；
如果有两个返回不成功，也会只执行第一个不成功；

//这个是一个不成功；
Promise.all([Promise.resolve(2),Promise.reject(3),Promise.resolve(4)]).then(res=>{    
    console.log(res); //这里会不执行；
}).catch(res=>{
    //promise不成功操作
    console.log(res); //打印出来是 3
});

//这个是两个不成功；
Promise.all([Promise.resolve(2),Promise.reject(3),Promise.reject(4)]).then(res=>{    
    console.log(res); //这里会不执行；
}).catch(res=>{
    //promise不成功操作
    console.log(res); //打印出来还是 3
});