理解 Promise 简单实现的背后原理
NHYCha
7年前
<p>在写javascript时我们往往离不开异步操作，过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作，然后为了解决回调地域的痛点，出现了一些解决方案比如事件订阅／发布的、事件监听的方式，再后来出现了Promise、Generator、async/await等的异步解决方案。co模块使用了Promise自动执行Generator，async/await这个Node7.6开始默认支持的最新解决方案也是依赖于Promise,所以了解Promise是非常有必要的，而理解它背后的实现原理则能在使用它的时候更加游刃有余。</p> <h2>实现一个简单的异步方案</h2> <p>我们知道 Promise 实现多个相互依赖异步操作的执行是通过 .then 来实现的，我们会不由发出疑问，后面的操作是如何得知前面异步操作的完成的，我们可能会产生一种想法，后面有一个函数在一直监听着前面异步操作的完成，你说的是发布／订阅模式？Promise的实现个人觉得也有点发布／订阅的味道，不过它因为有 .then 的链式调用，又没有使用on/emit这种很明显的订阅／发布的东西，让实现变得看起来有点复杂</p> <p>不过我们可以先想想发布／订阅是怎么做的，首先有一个事件数组来收集事件，然后订阅通过on将事件放入数组，emit触发数组相应事件，嗯嗯，这并不是很复杂，理解了这个以后，我们开始真正地讲解实现。</p> <p>Promise其实内部也有一个 defers 队列存放事件， .then 的事件就在里面,聪明的你就想到了，程序开始执行的时候， .then 就已经放入下一个事件，然后后面当异步操作完成时， resolve 触发事件队列中的事件，便完成了一个 .then 操作， 其实到这里我们就可以很快地想出一种解决方案，每次异步操作完成通过 resolve 触发事件并将事件从事件队列中移除，通过事件队列中的事件的 resolve 使事件的触发持续下去，我们可以用十几行代码就可以实现这样的逻辑，实现一个简单的异步编程方案</p> <pre> <code class="language-javascript">functionP(fn){ var value = null; var events = []; this.then = function(f){ events.push(f); return this; } functionresolve(newValue){ var f = events.shift(); f(newValue, resolve); } fn(resolve); } functiona(){ return new P(function(resolve){ console.log("get..."); setTimeout(function(){ console.log("get 1"); resolve(1); }, 1000) }); } a().then(function(value, resolve){ console.log("get..."); setTimeout(function(){ console.log("get 2"); resolve(2); }, 1000) }).then(function(value, resolve){ console.log(value) }) </code></pre> <p>这样就得到控制台如下的结果</p> <pre> <code class="language-javascript">get... get 1 get... get 2 2 </code></pre> <p>我们当然只是初步地简单接触异步的一种方案，我们没有 reject ,没有进行错误处理，这不是完整的，读者想要扩展的话，可以再自行去实现,接下来我们要去接触真正的 Promises/A+规范所实现的Promise</p> <h2>简单理解Promise/A+规范的promise背后的实现</h2> <p>Promise/A+规范： <a href="/misc/goto?guid=4958866170093509700" rel="nofollow,noindex">https://promisesaplus.com/</a></p> <p>我是通过这篇 <a href="/misc/goto?guid=4959745941276205962" rel="nofollow,noindex">《剖析 Promise 之基础篇》</a> 学习的，本文后面使用的代码也是来自于此文，读者可以先看完上文再来加深理解。</p> <p>假设我们有一个场景，我们需要异步先获取到用户id,再通过用户id异步再获取到用户名字，拿到名字输出，</p> <p>我们很迅速地写出Promise的代码（因为不是Promise的完整实现，就用MyPromise)</p> <pre> <code class="language-javascript">functiongetID(){ return new MyPromise(function(resolve, reject){ console.log("get id..."); setTimeout(function(){ resolve("666"); }, 1000); }) } functiongetNameByID(id){ return new MyPromise(function(resolve, reject){ console.log(id); console.log("get name..."); setTimeout(function(){ resolve("hjm"); }, 1000); }) } getID().then(getNameByID).then(function(name){ console.log(name); }, function(err){ console.log(err); }); </code></pre> <p>正确输出了我们想要的结果，后面的fn拿到了前面resolve的value</p> <pre> <code class="language-javascript">get id... 666 get name... hjm </code></pre> <p>其实我们最大的疑问会在于两个promise它是如何通过 .then 连接起来的,一图胜千言。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f8978859c88cb1537ec400f58f93ad5f.png"></p> <p>橙色：是刚开始初始化产生的东西（一堆.then产生的）</p> <p>紫色：是异步开始执行后的一系列流程</p> <p>第一眼看起来很复杂，下面我们慢慢去一步步拆开</p> <h3>先抛开紫色的不看</h3> <p><img src="https://simg.open-open.com/show/66a786a20fdc55ad6f987bdf291b26a2.png"></p> <p>每个Promise实例包含状态 state 、事件队列 defers 、 value 、 resolve 、 reject</p> <p>还有一个 handle 函数，当状态为 pending 时是将Defered{}（包含onFulfilled、onRejected、resolve、reject）放入队列的操作，当状态为 fulfilled 或 rejected 会执行相应事件的函数 onFulfilled / onRejected 并且resolve返回的东西</p> <p>然后为了实现串行Promise， .then 其实又产生了一个新的Promise实例作为中间Promise,</p> <p>它将 then 里的函数再与自己的实例中的 resolve , reject 共同组成一个Defered{}（包含onFulfilled、onRejected、resolve、reject）,注意这里非常关键，它放入了自己实例的 resolve 、 reject ，这将是串行Promise桥梁的关键之处（通过闭包实现的），用 handle 函数把这个对象放入前一个Promise实例的事件队列里</p> <h3>异步开始！</h3> <p><img src="https://simg.open-open.com/show/cc8978c495cf11f3601541848c3e441c.png" alt="理解 Promise 简单实现的背后原理" width="550" height="408"></p> <p>紫色：是异步开始执行后的一系列流程</p> <p>跟着标号看～假如前面的东西理解的话，你会看得下去的～哈哈</p> <ol> <li>getID setTimeout 1000s时间到,调用实例的resolve(<br> “666”)</li> <li>当前Promise实例的状态改变（等待=>完成），实例的value(=>666)</li> <li>调用当前handle函数，由于状态是fulfilled,传入当前value 666进入事件队列中的相应函数（它返回的也是一个Promise），getNameByID开始执行</li> <li>调用resolve通过判断返回的是不是Promise,如果是的话就调用当前返回的.then</li> <li>调用.then将前面实例的resolve、reject传过去作为onFulfilled、onRejected</li> <li>可以仔细看图的这条线，这样就很奇妙地将这个事件队列中返回的promise和下一个.then中间Promise串起来了，它们引用都是同样的resolve、reject</li> <li>当第二个异步操作getNameByID setTimeout 1000s再次执行完成,调用实例的resolve(“hjm”)</li> <li>当前Promise实例的状态改变（等待=>完成），实例的value(=>hjm)</li> <li>调用当前handle函数，由于状态是fulfilled,传入当前value hjm进入事件队列中的相应函数，其实就是下一个中间Promise的resolve(“hjm”)</li> <li>当前中间Promise实例的状态改变（等待=>完成），实例的value(=>hjm)</li> <li>调用当前handle函数，由于状态是fulfilled,传入当前value hjm进入事件队列中的相应函数，打印出console.log(“hjm”),成功拿到name</li> <li>调用resolve,发现事件队列已经没有东西了，程序也就结束了</li> </ol> <p>想要自己运行的同学可以试试看，理清了整个流程会对Promise清晰很多～</p> <h2>Promise的小test</h2> <p>这两个问题是从 <a href="/misc/goto?guid=4959738800287223017" rel="nofollow,noindex">饿了么 node-interview</a> 摘出</p> <h3>判断输出以及相应的时间</h3> <pre> <code class="language-javascript">let doSth = new Promise((resolve, reject) => { console.log('hello'); resolve(); }); setTimeout(()=> { doSth.then(()=> { console.log('over'); }) }, 10000); </code></pre> <h3>判断输出顺序</h3> <pre> <code class="language-javascript">setTimeout(function(){ console.log(1) }, 0); new Promise(functionexecutor(resolve){ console.log(2); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(3); }).then(function(){ console.log(4); }); console.log(5); </code></pre> <h3>解答</h3> <p>其实这两题用三个tip就可以解决</p> <ul> <li>Promise函数调用就执行</li> <li><a href="/misc/goto?guid=4958866170093509700" rel="nofollow,noindex">Promise/A+规范</a> 中then置于当前事件循环的末尾</li> <li>setTimeout(fn,0)会在下一个事件循环出现</li> </ul> <p>这里往深处分析，涉及到event loop、macro-task、micro-task等一些东西，个人也没怎么深入了解，就不加以深入分析了</p> <p>回到题目，第一题由tip1,所以是马上console.log(hello),然后隔10s后输出over</p> <p>第二题用用三个tip，Promise执行输出2，调用resolve，再输出3，然后调用then将输出4置于事件循环末尾，然后输出5，到达末尾，输出4，下一个事件循环，输出刚开始的1，所以顺序是23541</p> <h3> </h3> <p> </p> <p>来自：http://bupt-hjm.github.io/2017/03/23/study-promise/</p> <p> </p>