Vue+Promise.all()的使用

最新推荐文章于 2024-08-09 13:22:57 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-08-09 13:22:57 发布

阅读量1.2k

点赞数 9

文章标签： vue.js javascript 前端 Promise Promise.all

本文链接：https://blog.csdn.net/maxueyingying/article/details/140012731

版权

Promise.all()简介

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

Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

promise.all()该方法用于将多个Promise实例，包装成一个新的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)
})

1. 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);
})

2. 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);
})

3. 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);
})

tips

1.await 可以获得多个promise 的返回结果

2. Promise.all 返回的也是promise，所以可以直接await Promise.all();

1. 使用Promise

function fn(){
    return new Promise((resolve,reject)=>{
        let randomNum = parseInt(Math.random()*6+1);
        console.log(randomNum);
        if(randomNum>3){
            resolve('买'); 
        }
        else{
            reject('不买');
        }
    })
}
Promise.all([fn(),fn()]).then(
  (x)=>{console.log(x,'success')},(y)=>{console.log(y,'error');
});

Promise.all 里面参数为一个数组，数组的每一项是一个返回promise 的函数调用
then 的第一个参数是所有promise都成功的调用，返回结果是一个数组，数组的每一项为函数promise 的返回结果。
then 的第二个参数：返回结果有一个失败则执行失败的回调，拿到的是第一个失败的值

2. 使用await

await 是可以获得多个promise 返回结果的，
Promise.all()返回的也是promise结果。所以想要使用await 拿到多个promise的返回值，可以直接await Promise.all();

function fn(){
    return new Promise((resolve,reject)=>{
        let randomNum = parseInt(Math.random()*6+1);
        console.log(randomNum);
        if(randomNum>3){
            resolve('买'); 
        }
        else{
            reject('不买');
        }
    })
}
async function test(){
    try{
    let res = await Promise.all([fn(),fn()]);
    console.log(res,'success');
    }
    catch(error){
        console.log(error,'error');
    }
}
test();