建设网站需要给钱吗,品牌建设有哪些方面,园林景观设计公司发展规划,网站功能介绍是什么大家好#xff0c;我是若川。最近组织了源码共读活动《1个月#xff0c;200人#xff0c;一起读了4周源码》#xff0c;已经有超50人提交了笔记#xff0c;群里已经有超1500人#xff0c;感兴趣的可以点此链接扫码加我微信 ruochuan12 参与#xff0c;一起学习#xff… 大家好我是若川。最近组织了源码共读活动《1个月200人一起读了4周源码》已经有超50人提交了笔记群里已经有超1500人感兴趣的可以点此链接扫码加我微信 ruochuan12 参与一起学习共同进步。前言Promise 作为异步编程的一种解决方案在 ES6 中被标准化提供了 Promise 对象和一系列的 API。在事件循环、链式调用、调度器实现等面试场景中均有涉及。在本文中笔者将从零实现一个符合 Promise/A 标准的 Promise 主体代码逻辑并在后续系列文章中给出其他方法的实现以及常见的实际使用场景中的解法。1、准备本文按 Promise/A[1] (中文版【翻译】Promises/A规范[2]) 的标准实现不熟悉的读者可以先看一遍了解一些术语做些准备知识。2、Promise 实现本节我们将进入正题从零实现一个我们自己的 Promise。PS在下文中本文约定大写 Promise 指代我们实现的 MyPromise 函数对象小写 promise 指代一个实例对象。现在我们实现的 MyPromise 函数第一版定义如下function MyPromise(executor) {// TODO}2.1、状态定义Promise 只有三种状态pending、fulfilled 和 rejected 其中后两种是终态。因此我们可以先定义一个状态集合const PRO_STATUS {PENDING: pending,FULFILLED: fulfilled,REJECTED: rejected
}2.2、状态转换及方式promise 对象内部就像一个状态机但是这个状态机有一点自己的限制条件即 它的状态变换路径只有两种pending-》fulfilled
或者
pending -》rejected并且转换之后是固定的。Ok在谈完状态转换的路径后我们来看一下状态转换的方式。在初始化 promise 对象时需要向构造函数提供一个 executor 函数该函数有两个入参函数类型•1、resolve该函数接受一个参数更改 promise 内部状态 pending-》fullfilled•2、reject该函数接受一个 Error 类型参数更改 promise 内部状态 pending -》rejected至此总结一下我们的 MyPromise 里应该有几个东西当前状态
fulfilled 状态下的 value 值
rejected 状态下的 reason 值
resolve 函数
reject 函数那么MyPromise 第二版现在是如下的样子let count 0
function MyPromise(executor) {const self thisself.status PRO_STATUS.PENDINGself.count countself.fulfilledValue undefinedself.rejectedReason undefinedtry {executor(resolve, reject)} catch (error) {reject(error)}function resolve(rs) {//TODO}function reject(err){// TODO}
}这里我们为每个实例追加了一个 count 计数读者可以忽略。实例化函数后我们直接执行了 executor 函数并传入了两个函数类型的参数。在 executor 函数内部用户可以通过 resolve 或者 reject 修改 promise 对象进入终态并且只能进入一次举个例子new MyPromise((resolve, reject){//balabala.......resolve(1) reject(new Error(error))resolve(2)
})这里写了三行修改 promise 状态的代码但是最后 promise 的状态是 fulfilled并且 fulfilledValue 是 1。这个我们在后面 resolve 和 reject 实现中说。2.3、then 和 catch 方法我们知道Promise 对象实现了链式调用来解决回调地狱的问题。类似这样new Promise((){....
})
.then(rs{...
})
.then(rs{})
.catch(err{})也就是说我们可以在 then 或 catch 中拿到 promise 对象的终态数据并通过生成新的 promise 对象向下传递。首先我们来看看 then 方法。then 方法接受两个函数类型的参数onfulfilled 和 onrejected。onfulfilled 接受 promise 的 fulfilledValue 作为入参并在 promise 为 fulfilled 状态时被调用 onrejected 接受 promise 的 rejectedReason 作为入参并在 promise 为 rejected 状态时被调用。const onfulfilled value {...}
const onrejected reason {...}
promiseA.then(onfulfilled, onrejected)此外then 方法将返回一个新的 Promise 类型对象。相比 then方法catch 方法仅接受一个 onrejected 函数类型的参数。和 then 方法一样将返回一个新的 Promise 类型对象。const onrejected reason {...}
promiseA.catch(onrejected)实际上then 和 catch 方法有几个作用•为 promise 对象收集 onfulfilled 和 onrejected 回调函数在终态后resolve 和 reject 函数触发进行回调的调用•触发 onfulfilled 和 onrejected 回调函数其实第一个比较好理解第二个可以用下面一个代码去解释。let promise new Promise((resolve){setTimeout((){resolve()promise.then(rs{console.log(2)}) // then2})
}).then(rs{console.log(1)}) // then1rs{console.log(1)} 回调通过 then1 收集在 resolve 调用后被触发。此时 promise 对象进入终态 rs{console.log(2)} 回调通过 then2 收集并触发执行。并且这些回调函数只会被调用一次。综上我们可以总结如下•MyPromise 内部 resolve、reject 函数以及 then、catch 都可能会触发回调函数执行那么他们可能在代码链路上交汇在某个执行点也就是说他们调用了同一个处理函数我们定义为 _handle 函数。•此外Promise 函数内部有一个数据结构维护当前的回调函数这里我们需要一个队列。•最后如果我们有 promise A 对象promise A 对象的 then 和 catch 方法都会返回一个新的 promise B 实例A 内部状态是 fullfilled它只调用 onfulfilled 方法。此外promise A 进入终态才会使得 promise B 进入终态关键点在于 A 持有 B 的 resolve、rejectA 进入终态后调用 B 的 resolve/reject具体调用 resolve 还是 reject 以及入参要分情况区别。Ok有了上面的结论我们继续修改已有代码const TYPES {THEN: then,CATCH: catch,FINALLY: finally
}
...
function MyPromise(executor) {const self this...self.cbQueue [] // 保存回调等数据...function resolve(rs) {self._handle()}function reject(err){self._handle()}
}MyPromise.prototype._handle function(cb){// TODO
}/*** * param {*} onfulfilled * param {*} onrejected * returns */
MyPromise.prototype.then function(onfulfilled, onrejected) {return new Promise((resolve, reject) {this._handle({type: TYPES.THEN,resolve,reject,onfulfilled,onrejected})})
}/*** * param {*} onrejected * returns */
MyPromise.prototype.catch function(onrejected) {return new Promise((resolve, reject) {this._handle({type: TYPES.CATCH,resolve,reject,onrejected})})
}上面的代码里我们还定义了一个 TYPES 来指定回调函数是通过 then、catch还是 finally 方法收集的以此来辅助我们在 _handle 函数中的处理。现在关键来到了 _handle 函数。我们根据 Promise/A 的标准和实际代码使用中对于细节进行了归结。•1、A.resolve() 情况下B 不管是通过 then 还是 catch 产生 都要调用 B.resolve()入参要看是否提供了 onfulfilled具体如下 1如果 B 是 A.then 生成则 B.resolve(onfulfilled(A.fulfilledValue)) 2如果 B 是 A.catch 生成则 B.resolve(A.fulfilledValue)不会调用 A.catch 提供的 onrejected 方法 如果不提供 onfulfilled 则 B.resolve(A.fulfilledValue)•2、注意A.reject() 的情况下如果有 onrejected 函数处理则状态发生转换并且入参要看是否提供了 onrejected 函数进行包装具体如下 1A 调用 rejectB 是 A.then 生成则 B.reject(A.rejectedReason) 或者 B.resolve(onrejected(A.rejectedReason)) 2A 调用 rejectB 是 A.catch 生成则 B.resolve(onrejected(A.rejectedReason)) 如果不提供 onrejected 则 B.reject(A.rejectedReason) • 3、如果 A.fulfilledValue 是一个 Promise 类型则要把 A.then() 这些收集到的回调给 A.fulfilledValue针对 3可以看如下示例代码function delay(){new Promise((resolve, reject){// promise 0// console.log(0)// resolve(resolve)reject(new Error(reject))}).then(rs{return new Promise(resolve{setTimeout((){console.log(1)resolve(inner rs)}, 2000)})}).catch(err{ // promise 1return new Promise(resolve{ // promise 2setTimeout((){console.log(1)resolve(inner err)}, 2000)})}).then(rs{console.log(2)return then2})
}
最后打印
注先延迟2s
1
2最后的 then 会被 promise1 收集到因为 promise1 的 fulfilledValue 是一个 Promise 类型对象即 promise2。要实现延迟 2s 打印 1 后再打印 2需要把 promise1 收集到的回调赋给 promise2。Ok了解了处理逻辑我们就可以直接上代码了。MyPromise.prototype._handle function(cb){if(cb) {// then、catch、finally 方法处理this.cbQueue.push(cb)}else{// resolve、reject 处理}if(this.status PRO_STATUS.PENDING){// nothing to do} else {for (let i 0; i this.cbQueue.length; i) {const cb this.cbQueue[i];const { type, resolve, reject, onfulfilled, onrejected, onfinally } cb// finallyif(type TYPES.FINALLY){onfinally()resolve()continue}if(this.status PRO_STATUS.FULFILLED){//if(typeof resolve function){let fulfilledValue this.fulfilledValuelet ans fulfilledValueif(fulfilledValue instanceof MyPromise){// 收集的回调赋给 fulfilledValuefulfilledValue.cbQueue this.cbQueuethis.cbQueue []continue}if(typeof onfulfilled function){// 这里要处理一下数据ans onfulfilled(fulfilledValue)if(ans instanceof MyPromise ans.status ! PRO_STATUS.PENDING){if(ans.status PRO_STATUS.FULFILLED){resolve(ans.fulfilledValue)}else{reject(ans.rejectedReason)}}else{resolve(ans)}}else{resolve(ans)}}}else{if(typeof resolve function){let ans this.fulfilledValueif(typeof onrejected function){/*** 这个地方要注意下上面 setTimeout模拟异步的地方修改状态的部分要放在 setTimeout 外面。* 否则到这里 status 还是 pending*/ans onrejected(this.rejectedReason)if(ans instanceof MyPromise ans.status ! PRO_STATUS.PENDING){if(ans.status PRO_STATUS.FULFILLED){resolve(ans.fulfilledValue)}else{reject(ans.rejectedReason)}}else{resolve(ans)}}else{reject(this.rejectedReason)}}}// })}this.cbQueue []}
}_handle 函数先对进来的参数进行判断有的话就入队列。然后看当前的状态是终态就处理上面的逻辑最终清空队列。否则就直接退出。PS这里缺少了 finally 方法的处理代码我们在后面补上。此外还有就是关于异常的抛出问题当 promise A 对象进入 rejected 状态此时如果 promise.then 未提供 onrejected则会抛出 error; 如果提供 onrejected则不会也就是有的资料中提到的 error 被“吃掉”了这部分功能并未实现。2.4、resolve 和 reject 实现好了到了这里基本上完成了大部分的工作了但是还缺少了 resolve 和 reject 部分的代码实现。无论是 resolve 还是 reject 函数他们的功能都是两个部分•修改状态•触发 onfulfilled/onrejected 回调如果有的话我们都知道Promise 属于异步任务里的微任务在构造函数里的代码和 onfulfilled/onrejected 里的代码都运行在主线程中。因此我们需要模拟一个异步的过程并且在定义多个 Promise 对象实例时保证一个时序这里我们用 setTimeout并在 setTimeout 中调用 _handle 函数。好的我们来看 resolve 函数的具体实现。function resolve(rs) {if(self.status PRO_STATUS.PENDING) {/*** 在主线程修改状态*/self.status PRO_STATUS.FULFILLEDself.fulfilledValue rssetTimeout(() { /*** 模拟异步但是这里有一个bugsetTimeout 并不准确* 在 Promise.race 中有问题主要是 setTimeout 执行间隔*/self._handle()})}
}可以看到首先判断了当前状态确保只能第一个 resolve/reject 方法里面的代码被执行去把 pending 状态修改为终态并且是在主线程中修改了状态。另外注释里标明了一个问题我们使用了 setTimeout 去模拟异步但是因为它本身延迟执行的特性会带来一些问题比如下面的测试代码const Promise MyPromise
function race(){Promise.race([new Promise(resolve{setTimeout((){resolve(1)}, 200)// 这里有一个bug超时改成20看看}),new Promise((resolve, reject){setTimeout((){// resolve(2)reject(new Error(timeout))}, 10)})]).then(res{log2(race res, {res})},err{log2(race err, {err})})
}在注释处修改为 20 会产生意外的效果。比照 resolve 函数的实现我们可以很容易给出 reject 函数的代码实现function reject(err){if(self.status PRO_STATUS.PENDING) {self.status PRO_STATUS.REJECTEDself.rejectedReason errsetTimeout(() {self._handle()})}
}3、结语通过本文的介绍我们得到了一个 Promise 实现。下一节中我们介绍一些 API 的实现。References[1] Promise/A: https://promisesaplus.com/[2] 【翻译】Promises/A规范: https://www.ituring.com.cn/article/66566最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读1个月200人一起读了4周源码我历时3年才写了10余篇源码文章但收获了100w阅读老姚浅谈怎么学JavaScript我在阿里招前端该怎么帮你可进面试群················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
