Promise.all、Promise.race、Promise.allSettled所有静态方法总结

promise的静态方法

前言

前一篇我们已经介绍了关于自己实现promise的文章前端面试题之手写promise，本篇我们主要介绍的是promise的静态方法all、race、allSettled、any，静态方法就是类和构造函数自带的方法，不是promise实例的方法then、catch、finally等。

Promise.all

语法

Promise.all方法接受一个参数，参数类型必须是一个数组，数组里面每一项都是一个promise实例，该方法会返回一个新的promise实例
每一个实例的状态如果都是成功fulfilled状态，新返回的promise实例newProm会执行then方法，then方法里面res是每一个实例的终值，res是一个数组，数组里面每一个终值的顺序由我们在调用promise.all传递的参数在数组顺序决定，不受每个实例获取终值的时间决定。

    // 每一个实例全部成功
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p1')
        }, 3000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p2')
        }, 2000)
    })
    const p3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p3')
        }, 1000)
    })
    const newPro = Promise.all([p1,p2,p3])
    newPro.then(res=>{
        console.log(res) // ['p1', 'p2', 'p3']
        // res获取终值的顺序由all参数[p1,p2,p3]顺序决定，不会由每一个实例获取终值时间决定
    })

只要有一个实例的状态是失败reject，新返回的promise实例会执行catch方法，该方法里面能够获取err,err就是最快出错实例的拒因。

    // 每一个实例全部成功
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p1')
        }, 3000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('p2')
        }, 2000)
    })
    const p3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('p3')
        }, 1000)
    })
    const newPro = Promise.all([p1,p2,p3])
    newPro.catch(err => {
        console.log(err) // 'p2'
        // 实例p2最先出错，所以获取的err是'p2'
    })

应用场景
- 项目中某个操作依赖于两个或者多个请求的结果再进行处理
- 比如：首页需要等所有接口数据都返回才会显示页面，否则都会显示骨架图。

Promise.race

语法

Promise.race方法接受一个参数，参数类型必须是一个数组，数组里面每一项都是一个promise实例，该方法会返回一个新的promise实例
race方法不会关注promise实例的状态，只会关注哪个实例先有结果，这个结果可能是一个终值，也有可能是一个拒因。

    // 实例先有成功的状态
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p1')
        }, 3000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('p2')
        }, 2000)
    })
    const p3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p3')
        }, 1000)
    })
    const newPro = Promise.race([p1,p2,p3])
    newPro.then(res => {
        console.log(res) // 'p3'
    })

    // 实例先有失败的状态
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p1')
        }, 3000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('p2')
        }, 2000)
    })
    const p3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('p3')
        }, 1000)
    })
    const newPro = Promise.race([p1,p2,p3])
    newPro.catch(err => {
        console.log(err) // 'p3'
    })

应用场景
- 项目里面测试cdn的速度，就是项目里面接口会部署几个服务器，我们获取最快的服务器地址
- fetch请求超时设置取消请求

Promise.allSettled

语法

Promise.allSettled方法接受一个参数，参数类型必须是一个数组，数组里面每一项都是一个promise实例，该方法会返回一个新的promise实例
allSettled方法无论每一个实例的状态是成功还是失败，都会执行then方法，拿到所有实例的结果，返回的res也是一个数组，顺序也是由参数的位置决定，不受实例执行时间影响。
返回的res里面包含每一个实例结果的状态status，如果是成功返回fulfilled，如果是失败返回reject
如果是成功返回终值value，如果是失败返回拒因reason

    // 实例先有成功的状态
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('p1')
        }, 3000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('p2')
        }, 2000)
    })
    const p3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('p3')
        }, 1000)
    })
    const newPro = Promise.allSettled([p1,p2,p3])
    newPro.then(res => {
        console.log(res)
        /* 
            [
                { status: 'fulfilled', value: 'p1' },
                { status: 'rejected', reason: 'p2' },
                { status: 'rejected', reason: 'p3' }
            ]
         */
    })

应用场景
- 项目里面同时请求多个接口，无论接口是成功还是失败我们都要拿到多个接口的返回值

Promise.any

语法

Promise.any方法接受一个参数，参数类型必须是一个数组，数组里面每一项都是一个promise实例，该方法会返回一个新的promise实例
注意：此方法需要node高版本支持，建议在浏览器环境测试。
any方法只要有一个实例状态成功就会执行then方法，得到这个实例的终值，这一点和race相同

    const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p1')
        }, 3000)
    })
    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p2')
        }, 2000)
    })
    const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p3')
        }, 1000)
    })
    Promise.any([p1, p2, p3]).then(res => {
        console.log(res) // 'p1'
    })

和race不同的是它不会因为一个实例失败就执行catch，它会等所有实例都失败才执行catch方法。

    const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p1')
        }, 3000)
    })
    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p2')
        }, 2000)
    })
    const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p3')
        }, 1000)
    })

    Promise.any([p1, p2, p3]).catch(err => {
        console.log(err) // AggregateError: All promises were rejected
    })

应用场景
- Promise.any作用和race几乎相同，暂未发现异同之处

结语

以上便是对于Promise静态方法的总结，如有不足，欢迎指正，谢谢！

posted @ 2021-10-29 18:03 Mjser 阅读(354) 评论(1) 编辑收藏举报

刷新页面返回顶部

Promise.all、Promise.race、Promise.allSettled所有静态方法总结

promise的静态方法

前言

Promise.all

Promise.race

Promise.allSettled

Promise.any

结语

公告