帮你弄懂Promise原型方法then, catch, finally

🍗 饿了，就去吃好吃的；困了，就早点去睡；累了，就好好休息；不要自己太大的压力。

---

Promise 原型方法

Promise 构造函数的原型上实现了then, catch, finally方法，也就意味着每个 Promise 实例都都可以直接调用这样 3 个方法。

另外提一下 Promise 构造函数上实现了all, race, reject, resolve, allSettled, any 方法，这些方法只属于 Promise 构造函数自己，是不能在实例中被调用的（也就是只会以这种形式出现：如 Promise.all()）

Promise.prototype.then()

then() 方法可以处理 Promise 被接受或拒绝的情况。

🔖 参数

then(onFulfilled, onRejected) 最多可以接受两个参数 (回调函数)：

onFulfilled

当 Promise 变成接受状态 (fulfilled) 时调用的函数。该函数有一个参数，即接受的最终结果 (the fulfillment value)。

// then()方法的第一个参数，用来处理接受状态的Promise
Promise.resolve(1)
.then((res) => {
	console.log(res) //1
})

如果该参数 (指的是onFulfilled) 不是函数，则会在内部被替换为 (x) => x，即原样返回 promise 最终结果 (后面会讨论 then 方法的返回值)。

Promise.resolve(1).then(5);
Promise.resolve(1).then();
//与下面的代码是等价的：
Promise.resolve(1).then((x) => x);

注意：参数不是函数也 包括没有参数 (即 undefined) 的情况！下图说明了这 3 种情况：

onRejected

1）当 Promise 变成拒绝状态 (rejected) 时调用的函数。该函数有一个参数，即拒绝的原因 (rejection reason)。

// then()方法的第二个参数，用来处理拒绝状态的 Promise
Promise.reject(2)
.then(()=>{},
(reason)=>{
	console.log(reason) //2
})

2）如果该参数 (指的是 onRejected) 不是函数，则会在内部被替换为一个 "Thrower" 函数 (it throws an error it received as argument)，也就是会报错。

Promise.reject(2).then(()=>{},5);
Promise.reject(2).then(()=>{});

注意：同理，这里说的参数不是函数也 包括没有参数 (即 undefined) 的情况：

---

🔖 返回值

这里的返回值指的是 then() 的返回值，是链式调用的基础。

当 Promise 完成 (fulfilled) 或者失败 (rejected) 时，会异步调用返回函数，返回一个 Promise 对象，不过返回值与 then() 方法中的回调函数是有关系的，如果 then() 的回调函数：

1. 没有返回任何值

那么 then 返回一个接受状态的 Promise，并且该接受状态回调函数的参数值为 undefined。

也就是说在处理 then() 返回的 Promise 的回调函数中参数是 undefined，不理解就看下面的例子：

Promise.resolve(1).then(res=>{})
// 这里 then() 中的回调函数没有返回任何值，看看结果吧：

下面的例子可能对你理解第二句话有帮助 (后面的几种情况都与此类似，都举例说明了)：

Promise.resolve(1)
.then(res=>{})
.then(param=>{
	console.log('参数',param)
})
//这里试着打印下参数，看下结果吧：

2. 返回一个值

那么 then 方法返回一个接受状态的 Promise ，并且将返回的值作为接受状态的回调函数 (onFulfilled) 的参数值。

Promise.resolve(1)
.then(res=>{ return 6 })

Promise.resolve(1)
.then(res=>{ return 6 })
.then(param=>{
	console.log('参数',param)
})

3. 抛出一个错误

那么 then 返回一个拒绝状态的 Promise，并且将抛出的错误作为拒绝状态的回调函数 (onReject) 的参数值。

Promise.resolve(1).then(()=>{
	throw new Error('Oops,Error')
})

//因为是拒绝，这次要用then()的第二个参数捕捉原因
Promise.resolve(1).then(()=>{
	throw new Error('Oops,Error')
}).then(null,reason=>{
	console.log(reason)
})

后面三种是分别返回不同状态的 Promise

4. 返回一个接受状态的 Promise

那么 then 也会返回一个接受状态的 Promise，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的 Promise 的接受状态回调函数的参数值。

Promise.resolve(1).then(()=>{
	return Promise.resolve(3)
})

Promise.resolve(1).then(()=>{
	return Promise.resolve(3)
}).then(param=>{
	console.log('参数',param)
})

⒌ 返回一个拒绝状态的 Promise

那么 then 也会返回一个拒绝状态的 Promise，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的 Promise 的拒绝状态回调函数的参数值。

Promise.resolve(1).then(()=>{
	return Promise.reject(5)
})

//因为是拒绝状态，要用then()的第二个参数捕捉原因
Promise.resolve(1).then(()=>{
	return Promise.reject(5)
}).then(null,param=>{
	console.log('参数',param)
})

⒍ 返回一个未定状态 (pending) 的 Promise

那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

function func(){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve('过了两秒')
		},2000)
	})
}

func()

示例中延时返回以得到 pending 状态的 Promise，立即查看就得到还未有返回值的 pending 状态，2秒钟之后就能看到有返回值的终态

也可以试着用 then() 方法捕捉一下参数：

func().then(param=>{
	console.log('参数',param)
})

Promise.prototype.catch()

catch() 方法用来处理 Promise 被拒绝的情况，相当于 then(undefined, onRejected)

🔖 参数

catch() 接受一个参数 (回调函数)：

onRejected

1）当 Promise 被 rejected 时调用的函数。 该函数拥有一个参数 reason (rejection 的原因)

2）如果这个参数 (指的是 onRejected) 不是函数时，也是会报错的。这与 then() 方法中第二个参数不是函数的情况吻合。

---

🔖 返回值

如果 catch() 中的回调函数抛出一个错误或返回一个本身失败的 Promise， 则返回一个 rejected 状态的 Promise；其他情况返回 resolved 状态的 Promise

🔖 catch() 链式调用参考

Promise.prototype.finally()

要点理解

1. finally 方法用来指定在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行的回调函数。这样可以避免同样的语句需要在 then() 和 catch() 中都要写一次的情况。
   如果你想在 promise 执行完毕后无论其结果怎样都做一些处理或清理时，finally() 方法可能是有用的。
2. finally 方法的回调函数不接受任何参数，这意味着没有办法知道前面的 Promise 状态到底是 fulfilled 还是 rejected。这表明finally 仅用于无论最终结果如何都要执行的情况，而不能依赖 Promise 执行结果。
3. finally 方法本身无异常抛出的情况下，总是会返回原来的 Promise 对象值；若抛出异常，则返回异常的 Promise 对象。

Promise 的三种状态

一个 Promise 只有可能是以下 3 个状态：pending 待定、fulfilled 已兑现、rejected 已拒绝。

关于 resolved
在第一次写下这篇文章的时候，谷歌浏览器中已兑现的 Promise 的 [[PromiseStatus]] 确是 resolved，但在今天重新整理这篇文章的时候就是 fulfilled 状态。应该是根据规范在实现上做了调整。