Promise 的then 里发生了什么

jiezi

6 年前

Promise 大家都知道怎么用，但是对于内部的原理很多人都不是很清楚
来看一个面试题：Promise 的 then 是怎么实现的
首先来分析一下 then

then 是属于实例上的方法
参数有 2 个，分别为 onFulfilled, onRejected，并且都是可选的
可以实现链式调用
then 执行要执行 Promise onFulfilled 或者 onRejected 方法
参数 onFulfilled，onRejected 分别有自己的参数，分别是 resolve 的参数跟 reject 的参数
then 只能使用前一个 then 的返回值
then 返回值不能是同一个 promise

来一个一个看吧
then 是属于实例上的方法
Promise.prototype.then = function(){}
参数有 2 个，分别为 onFulfilled, onRejected，并且都是可选的
Promise.prototype.then = function(onFulfilled,onRejected){}
可以实现链式调用
Promise.prototype.then = function(onFulfilled,onRejected){
return new Promise(function(resolve,reject){
// 代码省略
})
}
要实现 promise 链式返回的必须是一个 Promise 再由于 status 改变状态了不能再变所以需要第二个 …. 第 N 个 promise 调用新的 resolve
then 执行要执行 Promise onFulfilled 或者 onRejected 方法
Promise.prototype.then = function(onFulfilled,onRejected){
var self = this; // 保存当前上下文
return new Promise(function(resolve,reject){
if(self.status === ‘resolved’){
onFulfilled(self.res)
}
if(self.status === ‘rejected’){
onRejected(self.err)
}
})
}
Promise.resolve(res)、、同步代码的执行情况下上述逻辑成立
参数 onFulfilled，onRejected 分别有自己的参数，分别是 resolve 的参数跟 reject 的参数
res 跟 err 来源如下
function Promise(executor){
let self = this
this.status = ‘pending’ // Promise 的状态值
this.res = undefined // 存成功之后的值
this.err = undefined // 存失败之后的值
executor(resolve,reject)
// 省略代码
}
executor 有 2 个参数分别为 resolve,reject 当调用
new Promise((resolve,reject)=>{
setTimeout(()=>{
if(true){
resolve(‘res’)
}else{
reject(‘err’)
}

},1000)
})
executor 会执行并且把成功的值或者失败的值抛出来，resolve 跟 reject 也是 2 个函数定义在 Promise 内部
function Promise(executor){
// … 代码省略
function resolve(res){
self.res = res
}
function reject(err){
self.err = err
}
executor(resolve,reject)

}
resolve 跟 reject 还需要改变 Promise 的状态值并且一旦发生改变之后不能再次改变
function Promise(executor){
// 代码省略
function resolve(res){
if(self.status === ‘pending’){
self.status = ‘resolved’
self.res = res
}
}
function reject(err){
if(self.status === ‘pending’){
self.status = ‘rejected’
self.err = err
}
}
executor(resolve,reject)
}
我们在 executor 中操作的往往是异步代码，这个之后直接 then，status 的状态值并未发生改变，所以不会执行 onFulfilled 跟 onRejected, 这个时候我们需要订阅
function Promise(executor){
// 代码省略
this.onFulfilledCallback = [] // 存成功之后的回调
this.onrejectedCallback = [] // 存失败之后的回调
function resolve(res){
if(self.status === ‘pending’){
self.status = ‘resolved’
self.res = res
}
}
function reject(err){
if(self.status === ‘pending’){
self.status = ‘rejected’
self.err = err
}
}
executor(resolve,reject)
}

new Promise(executor).then((onFulfilled,onrejected)=>{
var self = this; // 保存当前上下文 ** 注意：第二次调用 then this 是指向 new Promise 的 **
return new Promise(function(resolve,reject){
// … 代码省略
if(self.status === ‘pending’){
self.onFulfilledCallback.push(function(){// 把成功之后需要做的事存起来有多少个 then 就有多少个函数
onFulfilled(self.res) // 注意这里的 self.res 会随着 then 的调用发生改变因为每次 then 都 new 了一个 Promise
})
self.onrejectedCallback.push(function(){// 把失败之后的事存起来有多少个 then 就有多少个函数
onFulfilled(self.err)
})
}
})
})
当 resolve 的时候或者 reject 的时候一一拿出来执行
function resolve(res){
// 省略代码
self.res = res
onFulfilledCallback.forEach(fn=>{
fn()
})
}
实现链式调用我们需要对 then 函数执行的返回值做一个操作！！！
需求：
then 的参数 onFulfilled 函数需要接收到上一个 onfulfilled 的执行结果
Promise.prototype.then = function(onFulfilled,onRejected){
return new Promise((resolve,reject)=>{
// … 代码省略
if(self.status === ‘resolved’){
let x = onFulfilled(self.res) // 拿到 onFulfilled 的执行结果注意：这里执行 Promise.resolve() 同步代码
// 然后把 x 传递给下一个 then
resolve(x)
}
})
}
如果 resolve 是异步的话
Promise.prototype.then = function(onFulfilled,onRejected){
return new Promise((resolve,reject)=>{
// … 代码省略
if(self.status === ‘resolved’){
let x = onFulfilled(self.res) // 拿到 onFulfilled 的执行结果注意：这里执行的是 Promise.resolve() 同步代码
// 然后把 x 传递给下一个 then
resolve(x)
}
if(self.status === ‘pending’){
self.onFulfilledCallback.push(function(){
let x = onFulfilled(self.res) // 这里的 self.res 是上一个 new Promise 上的值此时的 onFUlfilled 相当于 fn(){let x = onFulfilled}
resolve(x)
})
}
})
}

// 同时为了拿到 fn(){let x = onFulfilled …} 得值传递给下一个 onFulfilled，onFulfilledCallback 需要改写 onRejectedCallback 同理

onFulfilledCallback.forEach(fn=>{
return fn()
})
onRejectedCallback.forEach(fn=>{
return fn()
})
–
onFullfillled 的返回值可能是个 promise 也可能是个普通值
考虑如下情况：
1. 返回值是个 promise
Promsie.resolve(11).then(res=>{

return new Promise(executor)
})
2. 返回值是个普通值
Promsie.resolve(11).then(res=>{

return 1
})
最关键的来了我们需要对 onFullfillled 的返回值进行判断
修改 then 函数
// … 代码省略
if(self.status === ‘resolved’){
let x = onFulfilled(self.res) // 拿到 onFulfilled 的执行结果注意：这里执行的是 Promise.resolve() 同步代码
// 然后把 x 传递给下一个 then
promiseResolve(x,resolve,reject)

}
function promiseResolve(x,resolve,reject){
if((typeof x != null && typeof x == ‘object’) || typeof x == ‘function’){// 确定是个引用类型
if (x instanceof Promise){// 确定是个 Promise 实例
let then = x.then
then.call(x,res=>{ // 保证 x 调用 res=>{}, res=>{} 是 then 的 onFulfilled 方法一直判断直到 onFulfilled 返回的是个普通值然后 resolve 出去
promiseResolve(res,resolve,reject)
},err=>{
reject(err)
})
}
}else{
resolve(x)
}
}
then 返回值不能是同一个 promise
考虑这样极端问题：
let p = new Promise(resolve=>{
resolve(3333)
})

let p2 = p.then(resolve=>{
return p2
})
这样会出现什么问题呢，onFulfilled 的返回结果如果是一个 promise 上面的递归调用已经说明了我们要不断的去递归最终的 onFulfilled 结果然后再改变 p2 的 status 这样变成了 p2 去等待 p2 的执行结果函数死掉了
所以 onFulfilled 的返回结果需要跟 then 的返回结果去比较修改函数
function promiseResolve(x,resolve,reject,promise){
if(x === promise){
return new Error(‘ 引用错误！’)
}
if((typeof x != null && typeof x == ‘object’) || typeof x == ‘function’){// 确定是个引用类型
if (x instanceof Promise){// 确定是个 Promise 实例
let then = x.then
then.call(x,res=>{ // 保证 x 调用 res=>{}, res=>{} 是 then 的 onFulfilled 方法一直判断直到 onFulfilled 返回的是个普通值然后 resolve 出去
promiseResolve(res,resolve,reject)
},err=>{
reject(err)
})
}
}else{
resolve(x)
}
}

Promise.prototype.then = function(onFulfilled,onRejected){

// … 代码省略
let promise2 = new Promise((resolve,reject)=>{
if(self.status === ‘pending’){
self.onFulfilledCallback.push(function(){
let x = onFulfilled(self.res) // 这里的 self.res 是上一个 new Promise 上的值此时的 onFUlfilled 相当于 fn(){let x = onFulfilled}
promiseResolve(x,resolve,reject,promise2)
})
}
})
return promise2
}
这段代码还是有错误，由于 javascript 主线程是单线程的，所以在 then 里的 promiseResolve 是拿不到 promise2 的所以我们需要开启异步使用定时器或者 nextTick 这里我们用定时器
Promise.prototype.then = function(onFulfilled,onRejected){

// … 代码省略
let promise2 = new Promise((resolve,reject)=>{
if(self.status === ‘pending’){
self.onFulfilledCallback.push(function(){
setTimeout(()=>{
let x = onFulfilled(self.res) // 这里的 self.res 是上一个 new Promise 上的值此时的 onFUlfilled 相当于 fn(){let x = onFulfilled}
promiseResolve(x,resolve,reject,promise2)
},0)
})
}
})
return promise2
}
此时整个 then 差不多完成了
需要补充的点

onFulfilled，onRejected 有可能是 undefined 这里未做判断
在 new Promise 时 executor 函数内部有可能报错这里未使用 try catch 捕获
这里对于 onRejected 的错误未抛出

总结
then 每次创建一个新的 promise 对象对于同步的 resolve，reject 直接调用 onFulfilled 或者 onRejected，对于异步的 resolve，reject 使用订阅发布模式，把每个 resolve，reject 暂存起来等达到条件时候一一执行，并且拿到返回结果去跟内部的 promise 比较，并且判断如果是一个 promise 的话，不断解析 onFulfilled 的返回结果直至 resolve 出去