扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关es6-promise源码的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
10年积累的成都网站建设、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有海湖新免费网站建设让你可以放心的选择与我们合作。主要逻辑:
本质上还是回调函数那一套。
通过_subscribers的判断完成异步和同步的区分。
通过 resolve,reject -> publish -> invokeCallback -> resolve,reject的递归和下一条then的parent是上一条的child来完成then链的流转
同步情况下函数流转: constructor -> resolver -> publish -> then -> invokeCallback
异步情况下函数流转: constructor -> then -> resolver -> publish -> invokeCallback
主要函数解析
1、constructor
作用: 把resolve,reject绑定到 resolver上-
constructor(resolver) { this[PROMISE_ID] = nextId(); this._result = this._state = undefined; this._subscribers = []; if (noop !== resolver) { typeof resolver !== 'function' && needsResolver(); this instanceof Promise ? initializePromise(this, resolver) : needsNew(); } }
2 then
作用: 把回调函数绑定在_subscribers上,catch和finally本质是then的语法糖
_subscribers的参数是一个数组,[0]是他的child,绑定下一个then链的parent,用于publish递归调用, 第二个是resolve 回调, 第三个是reject回调
export default function then(onFulfillment, onRejection) { const parent = this; const child = new this.constructor(noop); if (child[PROMISE_ID] === undefined) { makePromise(child); } const { _state } = parent; if (_state) { const callback = arguments[_state - 1]; asap(() => invokeCallback(_state, child, callback, parent._result)); } else { subscribe(parent, child, onFulfillment, onRejection); } return child; }
3 publish
作用: resolve,reject的触发会调用publish,publish继续调用invokeCallback,通过返回值继续调用resolve,reject,形成一个递归,完成then链的流转
function publish(promise) { let subscribers = promise._subscribers; let settled = promise._state; if (subscribers.length === 0) { return; } let child, callback, detail = promise._result; for (let i = 0; i < subscribers.length; i += 3) { child = subscribers[i]; callback = subscribers[i + settled]; if (child) { invokeCallback(settled, child, callback, detail); } else { callback(detail); } } promise._subscribers.length = 0; }
tip:
finally的callback是没有返回参数的,基于
return promise.then(value => constructor.resolve(callback()).then(() => value), reason => constructor.resolve(callback()).then(() => { throw reason; }));
感谢各位的阅读!关于es6-promise源码的示例分析就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流