Promise方法总结

最新推荐文章于 2024-03-12 16:52:45 发布

Leon CK

最新推荐文章于 2024-03-12 16:52:45 发布

阅读量161

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq554244261/article/details/112196657

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

Promise一些特性

状态不受外界影响，一旦改变就回不去了。
无法中途取消，一旦新建了就会立即执行。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）
如果没有使用catch()方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。 就是说，Promise的错误冒泡需要末尾有个catch()。
catch()方法返回的还是一个 Promise 对象，因此后面还可以接着调用then()方法。
如果catch方法后面还有个then，并且之前没有报错，那么会跳过这个catch执行之后的。

ES6

Promise.prototype.then()
Promise.prototype.catch()
Promise.resolve()
返回一个resolved状态的Promise，参数就是传递给then的数据。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.reject()
返回一个rejected状态的Promise，其他和resolve()一样。

resolve()和reject()的使用场景：
有时候成功的时候要返回一个Promise对象，失败了仅返回一个字符串。这个时候如果后续都是用then()方法来处理的话就会出错。这个时候就可以用静态方法来返回一个Promise对象（因为有些逻辑比较复杂的话还是得使用Promise原先的使用方法的，所以这个就是为了便于一些简单的处理）。

Promise.all()
Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。
参数：[p1,p2,p3]
返回值：
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
all()方法需要注意catch和then执行成功时返回的是一个resolved状态的Promise
Promise.race()
参数：[p1,p2,p3]
返回值：当最先执行的是成功的，就会执行resolve()，当最先执行的是失败的，就会执行reject()。

ES9

Promise.prototype.finally()
不管是成功还是失败，都会执行finally。参数直接写一个函数即可。

new Promise((resolve,reject) => {
       setTimeout(() => {
         resolve('a')
    },1000)
}).finally(() => {
   console.log('finally')
})

使用场景
请求时会有个提示框（加载中。。。），请求结束后不管是成功还是失败都要让其消失掉，这个时候使用finally()就比较方便。

ES11

Promise.allSettled() settled的意思是稳定的固定的
和Promise.all()的比较
当有一个Promise运行失败时，整个Promise.all()都会失败，这就影响到了已经成功的Promise使之不能正常运行。
Promise.all()的res或rej是多个组成的数组。
Promise.allSettled()返回的Promise状态总是fulfilled，返回的信息是一个数组，数组中每个元素对应了相应Promise实例的信息。
这个时候就可以用filter()方法对这个数组进行处理，将状态为成功的对象拿出来。

注意：allSettled()中Promise实例的值都是在后续then()方法中的resolve里面的，也就是说默认都是运行成功的！就算全部运行失败，最终的结构也是在resolve里面的。
如下图代码所示，就算全部失败，要取得信息也要通过res。

    const p1 = new Promise((resolve,reject) => {
        resolve('p1 success')
    })

    const p2 = new Promise((resolve,reject) => {
        resolve('p2 success')
    })

    const p3 = new Promise((resolve,reject)=> {
        reject('p3 fail')
    })

    Promise.allSettled([p1,p2,p3]).then(res => {
        console.log(res);
    },rej => {
        console.log(rej);
    })