共计 8316 个字符,预计需要花费 21 分钟才能阅读完成。
关注前端小讴,浏览更多原创技术文章
回顾:Promise 源码渐进式解读(一)
回顾:Promise 源码渐进式解读(二)
回顾:Promise 源码渐进式解读(三)
残缺代码 + 正文,可对照浏览
多个 then 串联 – 遗留的问题
/* 临时还未实现:不少于 2 个的.then()链式调用 */
new Promise((resolve, reject) => {resolve(3)
})
.then((res) => {
/* 调用第 1 个 then 时,prom 为以后 then 前返回的期约实例,是解决的期约实例,解决值为 3
在 handle()里打印 self 为 Promise { _state: 1, _handled: true, _value: 3, _deferreds: [] }
将持续异步执行处理程序 */
return res
})
.then((res) => {
/* 调用第 2 个 then 时,prom 为以后 then 前返回的期约实例,是第 1 个 then 返回的 prom,是一个新创建的、未解决的期约实例
将以后 then 中生成的 Handler 实例放入以后 then 前返回的期约实例的_deferreds 数组,而后暂停并返回
此时 handle()里打印 self 为 Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [ Handler {...} ] } */
console.log(res) // 不打印 res,第 2 个 then 及前面的处理程序,临时还未实现
})
- 多个
then
链式调用时,从第 2 个then
开始,then
前返回的Promise
实例都是pending
状态的空期约实例,因而都会 将Handler
实例放入then
前返回的Promise
实例的_deferreds
数组 - 本节将具体解说
handle()
和finale()
2 个办法,重点分析Promise
实例的_deferreds
数组在放入Handler
实例后的操作,应重复浏览
handle() – 源码
- 终于到了
handler()
的源码!其实仅比上一节的测试代码欠缺了一些内容,咱们 次要察看多个then
的串联(以 2 个为例)
/** handle()办法:外围
* 参数 self:上一个 then()前返回的 Promise 实例
* 参数 deferred:本次创立的 Handler 实例
*/
function handle(self, deferred) {// console.log(self, 'handle')
// console.log(deferred)
/* deferred 为创立的 Handler 实例
Handler {onFulfilled: [Function (anonymous)], // onFulfilled 处理程序,没有则为 null
onRejected: [Function (anonymous)], // onRejected 处理程序,没有则为 null
promise: Promise { // promise 属性指向一个新的 Promise 实例
_state: 0,
_handled: false,
_value: undefined,
_deferreds: []}
}
*/
/* 如果返回的期约实例的解决值为 promise 类型,_state=3 */
while (self._state === 3) {
self = self._value // 将解决值赋给返回的期约实例
// console.log(self)
}
/* 如果_state=0,即期约实例是 pendding 状态(还未执行 onResolve 或 onReject 处理程序)*/
/* 链式调用时,第二个或之后的 then()前返回的 Promise 实例永远是新的 Promise 实例,其_state 值为 0 */
if (self._state === 0) {self._deferreds.push(deferred) // 将 Handler 实例放入上一个 then()前返回的 Promise 实例的_deferrends 数组,因为上一个 Handler 实例的 promise 指向上一个 Promise 实例,因而上一个 Handler 实例也受到相应的影响
// console.log(self, 'push')
/*
Promise {
_state: 0,
_handled: false,
_value: undefined,
_deferreds: [
Handler {onFulfilled: [Function (anonymous)],
onRejected: [Function (anonymous)],
promise: [Promise]
}
]
}
*/
return // 同步执行到此暂停,期待异步执行(执行前一个 Promise 的 then 外面的 onResolve)}
/* 如果不是上述情况,标记以后进行的 promise._handled 为 true */
self._handled = true
// console.log(self)
/** 通过事件循环异步来做回调的解决
* 留神:这里的事件是异步执行的,第二个 then 会比这里的办法先执行
*/
Promise._immediateFn(function () {// console.log(deferred, '_immediateFn') // 留神:当有不少于 2 个.then()时,前一个.then()生成的 Handler 实例,其 promise 指向的 Promise 实例的_deferreds 指向问题(后一个.then()里蕴含 onFulfilled 或 onRejected 回调函数,_deferreds 不再指向空数组而是蕴含后一个 Handler 实例的数组)var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected // 依据上一个 then()前的 Promise 实力的_state,获取 onFulfilled 或 onRejected 处理程序
// console.log(cb)
/* 如果没有 onFulfilled 或 onRejected 回调函数,则携带以后的_value 值,期待下一个 Promise 对象的回调 */
if (cb === null) {// console.log(deferred.promise, self._value)
;(self._state === 1 ? resolve : reject)(deferred.promise, self._value)
/**
* resolve()或 reject 办法:期待下一个 Promise 对象的回调
* 参数 deferred.promise:Handler 实例的 promise,指向上一个 then()前的 Promise 实例
* 参数 self._value:上一个 then()前返回的 Promise 实例的_value 属性值
*/
// resolve(deferred.promise, self._value)
// reject(deferred.promise, self._value)
return
}
/* 如果有 onFulfilled 或 onRejected 回调函数,则执行本人的回调 */
var ret
try {
/**
* cb()办法:执行 onFulfilled 或 onRejected 处理程序
* 参数 self._value:then()前返回的 Promise 实例的解决值 / 回绝理由
*/
ret = cb(self._value) // 执行回调,返回值赋给 ret
} catch (e) {
/**
* reject()办法:解决下一个 catch 的回调办法
* 参数 deferred.promise:创立的 Handler 实例的 promise 属性,指向新的 Promise 实例
* 参数 e:错误信息
*/
reject(deferred.promise, e)
return
}
/**
* resolve()办法:解决下一个 then 的回调办法
* 参数 deferred.promise:Handler 实例的 promise,指向上一个 then()前的 Promise 实例
* 参数 ret:执行以后 then 回调的返回值
*/
// console.log(deferred.promise, ret)
resolve(deferred.promise, ret)
})
}
- 第 2 个
then
前返回的Promise
实例肯定是pending
状态,因而第 2 个then
中生成的Handler
实例会放入第 2 个then
前返回的Promise
实例的_deferreds
数组 -
重点来了 ,还记得
Handler
构造函数么?- 每调用 1 次
then
,都生成 1 个Handler
实例,2 个then
串联会生成 2 个Handler
实例 - 每个
Handler
实例的promise
,都指向以后then
中生成的Promise
实例prom
(也就是下一个then
前返回的Promise
实例) - 但因为第 2 个
then
扭转了第 2 个then
前返回的Promise
实例(_deferreds
数组放入Handler
实例),因而 第 1 个Handler
实例也随之扭转 - 关上
handle()
尾部的正文console.log(deferred.promise, ret)
可更好的察看Handler
实例的变动 - 总结来说,就是 第 1 个
Handler
实例的promise
属性指向的Promise
实例,其_deferreds
数组也放入了第 2 个Handler
实例
- 每调用 1 次
-
第 2 个重点 就是,调用处理程序后,会再次调用
resolve()
办法,保障第 2 个then
能获取到第 1 个then
中的返回值- 还记得么?在
resolve()
中,会给其_state
和_value
赋值,并调用finale()
办法。因而咱们来到最初的源码——finale()
办法
- 还记得么?在
finale() – 源码
/** finale()办法
* 参数 self:(期约)实例
*/
function finale(self) {// console.log(self, 'finale')
/* 如果_state 的值为 2(Promise 执行 reject()办法),且未提供回调函数(或未实现 catch 函数),则给出正告 */
if (self._state === 2 && self._deferreds.length === 0) {
/**
* 执行 Promise 构造函数的_immediateFn()办法
* 参数 fn:要执行的正告办法
*/
Promise._immediateFn(function () {
/* 如果未被解决过,则给出正告 */
if (!self._handled) {
/**
* 执行 Promise 构造函数的._unhandledRejectionFn()办法
* 参数 self._value:回绝理由
*/
Promise._unhandledRejectionFn(self._value)
}
})
}
/* 循环 self._deferreds,每一项都执行 handle()办法 */
for (var i = 0, len = self._deferreds.length; i < len; i++) {
/**
* handle()办法
* 参数 self:(期约)实例
* 参数 self._deferreds[i]:以后的 Handle 实例对象
*/
// console.log(self, self._deferreds[i])
handle(self, self._deferreds[i])
}
self._deferreds = null // 全副执行后,将_deferreds 数组重置为 null
}
- 终于到了
_deferreds
数组真正起作用的时候了!finale()
会循环这个数组,而后给每一项执行handle()
-
与
handle
一起,2 个then
串联的过程就是:- 第 1 个
then
前返回Promise
实例(调用resolve()
、finale()
,_deferreds
数组为空到此结束) - 调用第 1 个
then
,调用handle()
,Promise._immediateFn
放入异步线程 1 - 调用第 2 个
then
,第 2 个then
前返回的Promise
实例的_state
为 0,将第 2 个Handle
实例放入第 2 个then
前返回的Promise
实例的_deferreds
数组后返回(因而扭转了第 1 个Handle
) - 进入异步线程 1,执行第 1 个
then
的解决办法后,再次调用resolve()
、finale()
,_deferreds
数组不为空因而调用handle()
,Promise._immediateFn
放入异步线程 2 - 进入异步线程 2,执行第 2 个
then
的解决办法后,再次调用resolve()
、finale()
,_deferreds
数组为空全副完结
- 第 1 个
- 如果上述流程还不清晰,上面会用测试例子一步一步的详解
多个 then 的链式调用 – 阶段测试
new Promise((resolve, reject) => {resolve(3)
})
.then((res) => {console.log(res)
return 4
})
.then((res) => {console.log(res)
return 5
})
-
依据源码,上述代码的残缺调用流程为:
-
new Promise((resolve, reject) => {resolve(3)})
- 执行
new Promise
,创立Promise
实例,返回这个Promise
实例 - 执行
doResolve()
, 同步立刻执行执行器函数(resolve, reject) => {resolve(3)}
- 执行
resolve(3)
,将Promise
实例的_state
赋为 1、_value
赋为 3 - 执行
finale()
,Promise
实例的_deferreds
为[]
,赋为null
后执行完结 - 返回的
Promise
实例:Promise {_state: 1, _handled: false, _value: 3, _deferreds: null}
- 执行
-
.then((res) => {console.log(res);return 4})
- 执行
Promise.prototype.then
,创立新Promise
实例,传入空办法作为执行器函数,返回这个新的Promise
实例 - 执行
new Handler
,包装以后的onFulfilled
处理程序(res) => {console.log(res);return 4}
,返回Handler
实例 -
执行
handle()
,传入上一个then()
前返回的Promise
实例和Handler
实例- 上一个
Promise
实例的_state
为 1,将其_handled
赋为true
,执行Promise._immediateFn()
,将以后的onFulfilled
处理程序放入 异步线程 1
- 上一个
- 返回
Promise
实例:Promise {_state: 0, _handled: false, _value: undefined, _deferreds: [] }
- 执行
-
.then((res) => {console.log(res);return 5})
- 执行
Promise.prototype.then
,创立新Promise
实例,传入空办法作为执行器函数,返回这个新的Promise
实例 - 执行
new Handler
,包装以后的onFulfilled
处理程序(res) => {console.log(res);return 5}
,返回Handler
实例 -
执行
handle()
,传入上一个then()
前返回的Promise
实例和Handler
实例- 上一个
Promise
实例的_state
为 0,将本次的Hander
实例放入其_deferreds
空数组,return
后因为暂无后续.then()
, 同步线程暂停 - 上一个
Promise
实例变为:Promise {_state: 0, _handled: false, _value: undefined, _deferreds: [ Handler {} ] }
,Handler
为本次的Handler
实例 - 重点来了 :因为
Handler
实例的promise
指向.then()
中创立的Promise
实例(prom
),因而 上一个Handler
实例也受到影响,其promise
指向的Promise
实例(即上一个Promise
实例)的_deferreds
同样指向[Handler {} ]
- 上一个
- 回到异步线程 1,执行上一个
Handler
实例包装的onFulfilled
处理程序,打印 3,返回 4 -
执行
resolve()
,传入上一个Handler
实例的promise
(指向已发生变化的Promise
实例)和onFulfilled
返回值(4),将_state
赋为 1、_value
赋为 4- 此时已发生变化的
Promise
实例更新为Promise {_state: 1, _handled: false, _value: 4, _deferreds: [ Handler {} ] }
- 此时已发生变化的
- 执行
finale()
,传入更新的Promise
,循环_deferreds
数组 -
执行
handle()
,传入更新的Promise
实例和本次的Handler
实例- 更新的
Promise
实例的_state
为 1,将其_handled
赋为true
,执行Promise._immediateFn()
,将以后的onFulfilled
处理程序放入 异步线程 2(嵌套在异步线程 1 中)
- 更新的
- 因为 没有同步线程了,间接来到异步线程 2,执行本次
Handler
实例包装的onFulfilled
处理程序,打印 4,返回 5 -
执行
resolve()
,传入本次Handler
实例的promise
(未发生变化,初始的Promise
实例)和onFulfilled
返回值(5),将_state
赋为 1、_value
赋为 5- 此时
Promise
实例更新为Promise {_state: 1, _handled: false, _value: 5, _deferreds: [] }
- 此时
- 执行
finale()
,传入更新的Promise
,其_deferreds
为[]
,赋为null
后执行完结 - 返回
Promise
实例:Promise {_state: 0, _handled: false, _value: undefined, _deferreds: [] }
- 执行
-
-
再次总结:
new Promise
的 执行器函数 是同步 的,最先执行- 无论多少个
.then
,其 创立新Promise
实例、创立Handle
实例及handle()
办法的前半部分(直至Promise._immediateFn
前)都是 同步 的,顺次执行 - 前面的
.then
会扭转后面返回的Promise
实例,从而扭转后面生成的Handle
实例 -
同步执行结束后,执行首个
.then
中handle()
中的异步办法Promise._immediateFn
,开启异步线程- 在异步线程的最初,执行
resolve()
办法再执行finale()
办法 - 此时传入的
Promise
实例的_deferreds
不再是空数组,而是放入了下一个.then
中的解决办法 -
进而再次执行
handle()
办法及其中的Promise._immediateFn
- 在 异步线程中嵌套新的异步线程,直至最终执行结束
- 在异步线程的最初,执行
then 与 catch 交替的链式调用 – 阶段测试
Promise.resolve(1)
.catch((err) => {console.log(3) // 不打印,resolve 前面不执行 onRejected 处理程序
return 3
})
.then((res) => {console.log(res) // 1
})
Promise.reject(1)
.then((res) => {console.log(2) // 不打印,reject 前面不执行 onResolved 处理程序
return 2
})
.catch((err) => {console.log(err) // 1
})
resolve
前面不会执行onRejected
处理程序,reject
前面不执行onResolved
处理程序
两头的 then 或 catch 没有回调 – 阶段测试
new Promise((resolve, reject) => {resolve(3)
})
.then() // 没有回调,期待下个 Promise 的回调
.then((res) => {console.log(res)
})
new Promise((resolve, reject) => {reject(4)
})
.catch() // 没有回调,期待下个 Promise 的回调
.catch((res) => {console.log(res)
})
-
携带以后的
_value
值,期待下一个Promise
对象的回调handle()
办法里Promise._immediateFn
里的cb===null
,依据then
前Promise
对象的类型(解决 / 回绝),调用resolve()
或reject()
办法
实现后果总结
-
已实现:
- 多个
then
(catch
) 的链式调用 then
与catch
交替的链式调用- 两头的
then
或catch
没有回调的链式调用
- 多个
截至本节的代码 →