持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
每天3分钟，重学ES6-ES12文章汇总
前言
今天开始和大家一起系统的学习ES6 ,每天3分钟，用一把斗地主的时间，重学ES6 ，今天介绍的是ES6中新增的内容Promise的then、catch、finally方法，都属于Promise的实例方法，都是存放在Promise的prototype上的。
Promise回调函数Executor
Executor是在创建Promise时需要传入的一个回调函数，这个回调函数会被立即执行，并且传入两个参数:
代码语言：javascript复制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 三种状态
代码语言：javascript复制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的状态:
代码演示
代码语言：javascript复制
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 messagePromise有哪些实例方法
代码语言：javascript复制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 valuefinally方法
- 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")
})
