Promise的常用方法总结

基础的使用方法如resolve(),reject(),.then,.catch等一些方法就不在这里细说了,下面代码里也有大致的说明,更具体基础部分可参考另一篇文章Promise基础

 由于下面的方法都是需要几个promise实例来完成的,并且返回值都是一个promise,所以先new几个实例出来,注意new实例的时候P记得大写

        const pro1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                //调用resolve可以将promise状态变成成功状态,并且可以传入参数,在后面.then使用时可以拿到传入的参数
                resolve(1);
            },200)
        })
        const pro2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(2);
            },200)
        })
        const pro3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                //调用reject可以将promise状态变成失败状态,并且可以传入参数,在后面.catch使用时可以拿到传入的参数
                reject(3);
            },200)
        })

1.Promise.all

 Promise.all的状态由数组参数中所有promise是否都是成功的来决定

// 参数:promise数组
        // Promise.all方法接收一个数组参数,数组的每一项都是一个promise,
        // 只有当数组中每个promise实例都是成功状态时才会执行Promise.all的.then方法,
        // Promise.all的.then方法接收到的参数res为一个数组,表示每一个成功的promise传入的参数
        // 假如数组中有一个promise是失败的则执行Promise.all的.catch方法
        Promise.all([pro1,pro2,pro3]).then(res=>{
            console.log('all成功',res);
        },err=>{
            // promise失败时执行.then的第二个回调函数
            console.log('all失败回调函数二',err);
        })
        .catch(err=>{
            // .catch是promise的一个语法糖(字面意思,用起来能让你尝到甜头的语法)
            // 如果执行了.then的第二个回调函数则不会再执行.catch
            console.log('all失败.catch',err);
        })
        .finally(fin=>{
            // finally方法不管是成功或者是失败都会执行
            console.log('all都执行',fin);
        })

2.Promise.race

Promise.race的状态由数组参数中的第一个promise状态决定

  // 参数:promise数组
        // Promise.race方法接收一个数组参数,数组的每一项都是一个promise,
        // Promise.race的状态由数组参数中的第一个promise状态决定,
        // 假如第一个状态为失败,则执行.catch方法,成功则执行.then方法
        Promise.race([pro1,pro2,pro3]).then(res=>{
            console.log('race成功',res);
        }).catch(err=>{
            console.log('race失败',err);
        }).finally(fin=>{
            console.log('race都执行',fin);
        })

3.Promise.any

Promise.any的状态由数组参数中是否有成功的promise决定

    // 参数:promise数组
        // Promise.any方法接收一个数组参数,数组的每一项都是一个promise,
        // Promise.any的状态由数组参数中是否有成功的promise决定,
        // 假如数组参数中有一个为成功则走.then方法并接收到那个成功的promise传入的参数
        // 假如数组中所有的promise都失败,则执行.catch方法
        Promise.any([pro1,pro2,pro3]).then(res=>{
            console.log('any成功',res);
        }).catch(err=>{
            console.log('any失败',err);
        }).finally(fin=>{
            console.log('any都执行',fin);
        })

4.Promise.allSettled

Promise.allSettled方法只会执行.then方法跟.finally方法,不会执行.catch方法

  // 参数:promise数组
        // Promise.allSettled方法接收一个数组参数,数组的每一项都是一个promise,
        // Promise.allSettled方法只会执行.then方法跟.finally方法,不会执行.catch方法,
        // 执行.then方法接收到的参数res是一个数组,res数组中有所有promise的执行状态,以及所有promise传入的参数
        Promise.allSettled([pro1,pro2,pro3]).then(res=>{
            console.log('allSettled成功',res);
        }).catch(err=>{
            console.log('allSettled失败',err);
        }).finally(fin=>{
            console.log('allSettled都执行',fin);
        })

你可能感兴趣的:(vue.js,node.js,前端)