Promise.all()使用

Promise.all()简介

Promise.all()的方法用于将多个Promise实例，返回一个新的Promise实例，接收一个由promise任务组成的数组，可以同时处理多个promise任务，当所有的任务都执行完成时，即promise任务都走resolve，Promise.all()执行then()方法，会以数组的形式拿到每一项resolve结果; 如果promise任务有一个失败，走reject，Promise.all()执行catch()方法，返回第一个失败的信息，并且不会走成功的then()方法。Promise.all()方法可以用于并发请求，从而优化性能。

多个Promise任务:

let pro1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log('next--p1');
        // 返回成功状态，走Promise().then()方法。
        resolve('1000');
        // 返回失败状态，走Promise().catch()方法。
        // reject('error-1000');
    }, 1000)
})
let pro2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log('next--p2');
        resolve('3000');
        // reject('error-3000');
    }, 3000)
})
let pro3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log('next--p3');
        resolve('2000');
    }, 2000)
})

Promise.all()方法使用

Promise.all([
    // 等数据中的所有接口都执行resolve()成功状态后，执行then()方法。
    pro1,
    pro2,
    pro3,
]).then((resList) =>{
    // 最终以数组的形式返回，数据顺序，和all()中的数据顺序一致。
    console.log('resList--', resList);
}).catch(error =>{
    // 上述接口中有一个接口返回reject()失败状态，就不走then()方法，走catch方法。
    // 任务中只要有接口报错，就会返回最先报错接口的reject()数据，其他接口可继续执行，但不会走then()方法。
    console.log('error--', error);
})

Promise()的三个方法(then、catch、finally)

let pro = new Promise((resolve, reject) =>{
    // 成功
    resolve('resolve-成功');
    // 失败
    // reject('reject-失败');
})
pro.then(res => {
    // Promise实例，返回成功状态时，执行的方法，即返回resolve()
    console.log('res--', res);
}).catch(err => {
    // Promise实例，返回失败状态时，执行的方法，即返回reject()
    console.log('err--', err);
}).finally(fina =>{
    // 不论走 then()方法-成功 或者 catch()方法-失败，最终都会执行finally()方法中的逻辑代码。
    console.log('finally()方法', fina);
})

Promise连续执行then()方法

new Promise(resolve => {
    resolve('resolve()-1');
}).then(res=>{
    console.log('res-1', res);
    return new Promise(resolve =>{
        resolve('resolve()-2');
    })
}).then(res2 =>{
    console.log('res2--', res2);
    return res2;
}).then(res3 =>{
    console.log('res3--', res3);
    return res3;
}).then(res4 =>{
    console.log('res4--', res4);
})