本篇文章给大家带来的内容是关于es6-promise源码的分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
主要逻辑:
本质上还是回调函数那一套。
通过_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; }));
登录后复制
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
以上就是es6-promise源码的分析的详细内容，更多请关注【创想鸟】其它相关文章！
