每天3分钟，重学ES6-ES12(十)Promise参数实例方法介绍

虎妞先生

发布于 2022-10-27 20:04:21

2700

发布于 2022-10-27 20:04:21

文章被收录于专栏：前端开疆扩土之路前端开疆扩土之路

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

每天3分钟，重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是ES6中新增的内容Promise的then、catch、finally方法，都属于Promise的实例方法，都是存放在Promise的prototype上的。

Promise回调函数Executor

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

new Promise((resovle,reject)=>{
    console.log('Executor')
})

通常我们会在Executor中确定我们的Promise状态:
- 通过resolve，可以兑现(fulfilled)Promise的状态，我们也可以称之为已决议(resolved);
- 通过reject，可以拒绝(reject)Promise的状态;
这里需要注意:一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的
- 在我们调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成兑现(fulfilled);
在之后我们去调用reject时，已经不会有任何的响应了(并不是这行代码不会执行，而是无法改变Promise状态);

代码演示promise 三种状态

const promise = new Promise((resolve, reject) => {
})
promise.then(res => {
}, err => {
})

// 完全等价于下面的代码
// 注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定)
new Promise((resolve, reject) => {
  // pending状态: 待定/悬而未决的
  console.log("--------")
  reject() // 处于rejected状态(已拒绝状态)
  resolve() // 处于fulfilled状态(已敲定/兑现状态)
  console.log("++++++++++++")
}).then(res => {
  console.log("res:", res)
}, err => {
  console.log("err:", err)
})

resovle不同值的区别

情况一:如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数;
情况二:如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态: 代码演示

// 1.传入Promise的特殊情况
const newPromise = new Promise((resolve, reject) => {
     // resolve("aaaaaa")
    reject("err message")
})

new Promise((resolve, reject) => {
   // pending -> fulfilled
 resolve(newPromise)
}).then(res => {
   console.log("res:", res)
}, err => {
   console.log("err:", err)
})
// err:reject message

情况三:如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态:

代码演示


new Promise((resolve, reject) => {
  // pending -> fulfilled
  const obj = {
    then: function(resolve, reject) {
      // resolve("resolve message")
      reject("reject message")
    }
  }
  resolve(obj)
}).then(res => {
  console.log("res:", res)
}, err => {
  console.log("err:", err)
})
// err:reject message

Promise有哪些实例方法

console.log(Object.getOwnPropertyDescriptors(Promise.prototype))

then方法

接受两个参数

then方法是Promise对象上的一个方法:它其实是放在Promise的原型上的 Promise.prototype.then
then方法接受两个参数:
- fulfilled的回调函数:当状态变成fulfilled时会回调的函数;
- reject的回调函数:当状态变成reject时会回调的函数;多次调用
一个Promise的then方法是可以被多次调用的:
- 每次调用我们都可以传入对应的fulfilled回调;
- 当Promise的状态变成fulfilled的时候，这些回调函数都会被执行;返回值
then方法本身是有返回值的，它的返回值是一个Promise，所以我们可以进行如下的链式调用:
- 但是then方法返回的Promise到底处于什么样的状态呢?
Promise有三种状态，那么这个Promise处于什么状态呢?
- 当then方法中的回调函数本身在执行的时候，那么它处于pending状态;
- 当then方法中的回调函数返回一个结果时，那么它处于fulfilled状态，并且会将结果作为resolve的参数;
  - 情况一:返回一个普通的值;
  - 情况二:返回一个Promise;
  - 情况三:返回一个thenable值;
- 当then方法抛出一个异常时，那么它处于reject状态;

catch方法

多次调用

catch方法也是Promise对象上的一个方法:它也是放在Promise的原型上的Promise.prototype.catch
一个Promise的catch方法是可以被多次调用的:
- 每次调用我们都可以传入对应的reject回调;
- 当Promise的状态变成reject的时候，这些回调函数都会被执行;

返回值

事实上catch方法也是会返回一个Promise对象的，所以catch方法后面我们可以继续调用then方法或者catch方法:
- 下面的代码，后续是catch中的err2打印，还是then中的res打印呢?
- 答案是res打印，这是因为catch传入的回调在执行完后，默认状态依然会是fulfilled的;

const promise = new Promise((resolve, reject) => {
  reject("111111")
})

promise.catch(err => {
  console.log("err1:", err)
}).catch(err2 => {
  console.log("err2:", err2)
}).then(res => {
  console.log("res result:", res)
})
// err1: 111111
// res result: undefined

那么如果我们希望后续继续执行catch，那么需要抛出一个异常:


const promise = new Promise((resolve, reject) => {
  reject("111111")
})

promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
  throw new Error("catch return value")
}).then(res => {
  console.log("res result:", res)
}).catch(err => {
  console.log("err result:", err)
})

// err: 111111
// err result: Error: catch return value

finally方法

finally是在ES9(ES2018)中新增的一个特性:表示无论Promise对象无论变成fulfilled还是reject状态，最终都会被执行的代码。
finally方法是不接收参数的，因为无论前面是fulfilled状态，还是reject状态，它都会执行。代码演示

const promise = new Promise((resolve, reject) => {
  // resolve("resolve message")
  reject("reject message")
})

promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
}).finally(() => {
  console.log("finally code execute")
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-16，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js