JS高级 Promise介绍

顾久``

已于 2022-12-06 12:28:57 修改

阅读量241

点赞数 1

分类专栏： JavaScript高级文章标签： javascript 前端

于 2022-12-06 08:00:00 首次发布

本文链接：https://blog.csdn.net/qq_51968107/article/details/128196079

版权

JavaScript高级专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、Promise介绍

1.1 概念

Promise是一个类，可以翻译成承诺、许诺、契约。

💠当我们需要的时候，给予调用者一个承诺：待会儿我会给你回调函数时，就可以创建一个Promise的对象

🏷️在通过new创建Promise对象时，需要传入一个回调函数，称之为executor

这个回调函数会被立即执行，并且给传另外两个回调函数resolve、reject
当调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数
当调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数

1.2 promise的代码结构

const promise = new Promise((resolve, reject) => {
    resolve("哈哈")
    reject("错误")
})

promise.then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

1.3 Promise的三个状态

🏷️promise的状态一旦被确定下来，就不会更改

（1）待定（pending）：初始状态，既没有被兑现，也没有被拒绝。

💠当执行executor中的代码时，处于该状态

（2）已兑现（fulfilled）：意味着操作成功完成。

💠执行了resolve时，处于该状态，Promise已经被兑现

（3）已拒绝（rejected）：意味着操作失败

💠执行了reject时，处于该状态，Promise已经被拒绝

1.4 Executor

executor是在创建Promise时需要传入的一个回调函数，这个回调函数会被立即执行，并且传入两个参数

🏷️注意：一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的

在调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成兑现（fulfilled）。

在之后去调用reject时，已经不会有任何的响应了（并不是这行代码不会执行，而是无法改变Promise的状态）。

二、resolve值

（1）普通值：如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数

（2）promise对象：如果resolve中传入的是另外一个Promise，那么这个新的Promise会决定原Promise的状态

（3）thenable对象（很少用）：如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据then方法的结果来决定Promise的状态

//thenable对象（了解）
const promise = new Promise((resolve, reject) => {
  resolve({    
    name: "ming",
    then: function(resolve) {
      console.log('对象的then')
      resolve(1111)
    }
  })
})
promise.then((value) => {
  console.log("then中拿到值", value)
})

三、Promise实例方法

3.1 then方法调度

then方法是Promise对象上的一个方法（实例方法）：它其实是放在Promise的原型上的 Promise.prototype.then

then方法接受两个参数：

fulfilled的回调函数：当状态变成fulfilled时会回调的函数
reject的回调函数：当状态变成reject时会回调的函数

then方法的多次调用：

每次调用都可以传入对应的fulfilled回调
当Promise的状态变成fulfilled的时候，这些回调函数都会被执行

3.2 then方法返回值

🏷️promise本身就是支持链式调用的

then方法返回值是一个新的Promise，这个新的Promise的决议是等到then方法传入的回调函数有返回值时，进行决议

这个新的Promise所处状态：

当then方法中的回调函数本身在执行的时候，那么它处于pending状态
当then方法中的回调函数返回一个结果时，那么它处于fulfilled状态，并且会将结果作为resolve的参数

（三种情况：返回一个普通值；返回一个Promise；返回一个thenable值）

当then方法抛出一个异常时，那么它处于reject状态

3.3 catch方法调度

catch方法是Promise对象上的一个方法（实例方法）：它其实是放在Promise的原型上的 Promise.prototype.catch

catch方法的多次调用：

每次调用都可以传入对应的reject回调
当Promise的状态变成reject的时候，这些回调函数都会被执行

3.4 catch方法返回值

catch方法也会返回一个Promise对象，所以在catch方法后面可以继续调用then方法或者catch方法

💠catch传入的回调在执行完后，默认状态依然会是fulfilled的

3.5 finally方法的回调

finally是在ES9中新增的一个特性：表示无论Promise对象无论变成fulfilled还是rejected状态，最终都会被执行的代码。

它也是放在Promise原型上的。

🏷️finally方法是不接收参数的，因为无论前面是fulfilled状态，还是rejected状态，它都会执行。

四、Promise的类方法

4.1 resolve方法

有时候我们已经有一个现成的内容了，希望将其转成Promise来使用，这个时候我们可以使用 Promise.resolve 方法来完成。

Promise.resolve 的用法相当于 new Promise，并且执行resolve操作。

promise.resolve("ming")
//等价于
new Promise(resolve => resolve("ming"))

resolve参数的形态：

参数是一个普通的值或者对象
参数本身是Promise
参数是一个thenable

4.2 reject方法

reject方法类似于resolve方法，只是会将Promise对象的状态设置为reject状态。

Promise.reject 的用法相当于 new Promise，只是会调用reject。

promise.reject("ming")
//等价于
new Promise((resolve, reject) => reject("ming"))

💠Promise.reject传入的参数无论是什么形态，都会直接作为reject状态的参数传递到catch的。

4.3 all方法

它的作用是：将多个Promise包裹在一起形成一个新的Promise。

新的Promise状态由包裹的所有Promise共同决定：

当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组。
当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数。

💠all方法的缺陷：

当其中一个Promise变成reject状态时，新的Promise就会立即变成对应的reject状态。

那么对应resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的。

4.4 allSettled方法

在ES11中，新增了 Promise.allSettled：

该方法会在所有的Promise都有结果（settled），无论是fulfilled，还是rejectd时，才会有最终的状态。并且这个Promise的结果一定是fulfilled的。

4.5 race方法

race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果。

🏷️如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么就可以使用race方法。

4.6 any方法

any方法是ES12中新增的，和race方法是类似的：

any方法会等到一个fulfilled状态，才会决定新的Promise的状态。
如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejectd状态

💠如果所以的Promise都是reject的，那么会报一个AggregateError的错误。

顾久``

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS高级 Promise介绍

Promise是一个类，可以翻译成承诺、许诺、契约。当我们需要的时候，给予调用者一个承诺：待会儿我会给你回调函数时，就可以创建一个Promise的对象。在通过new创建Promise对象时，需要传入一个回调函数，称之为executor。
复制链接

扫一扫