<div class="article-content">
<h3 class="heading">预备知识</h3>
<ul><li>回调函数</li><li>高级函数</li><li>发布-订阅模式</li><li>promise A+ 规范</li></ul>
<h3 class="heading">promise是什么，能干什么</h3>
<p>Promise是异步编程的一种解决方案，它可以解决异步回调地狱的问题，防止层层嵌套对程序代码带来的难维护性。既然带来了方便，我们就有必要学习它的原理以及底层实现，所以笔者就按照PromiseA+规范写了一个简单的Promise，并实现了Promise.all()，Promise.race()等API</p>
<ul><li>解决回调地狱</li><li>解决多个回调函数同步结果</li></ul>
<h3 class="heading">promise的几个方法</h3>
<ul><li>promise.all()</li><li>promise.race()</li><li>promise.resolve()</li><li>promise.reject()</li></ul>
<h3 class="heading">promise的三种状态</h3>
<ul><li>等待态 pending</li><li>成功态 resolved</li><li>失败态 rejected</li></ul>
<h3 class="heading">promise的特点</h3>
<ul><li>1.executor 默认时new的时候就自动执行</li><li>2.每个promise的实例 都有then方法</li><li>3.then方法中有两个参数 分别是成功的回调和失败的回调</li><li>4.then方法是异步的(微任务) // 微任务先于宏任务执行</li><li>5.同一个promise的实例可以then多次,成功时回调用所有的成功方法，失败时会调用所有的失败方法</li><li>6.new Promise中可以支持异步行为</li><li>7.如果发现错误就会走入失败态</li></ul>
<p>下一次的输入需要上一次的输出 (有依赖关系)</p>
<ul><li>1.如果一个promise执行完后 返回的还是一个promise，会把这个promise 的执行结果，传递给下一次then中</li><li>2.如果then中返回的不是promise 是一个普通值，会将这个普通值作为下次then的成功的结果</li><li>3.如果当前then中失败了 会走下一个then的失败</li><li>4.如果返回的是undefined 不管当前是成功还是失败 都会走下一次的成功</li><li>5.catch是错误没有处理的情况下才会走</li><li>6.then中可以不写东西，相当于白写 （值的穿透）</li></ul>
<h3 class="heading"></h3>
<h3 class="heading">promise A+ 规范</h3>
<ul><li><a href="https://link.juejin.im?target=https%3A%2F%2Fpromisesaplus.com%2F">原文</a></li><li><a href="https://link.juejin.im?target=http%3A%2F%2Fwww.ituring.com.cn%2Farticle%2F66566">翻译</a></li><li>校验插件 <code>npm install promises-aplus-tests -g</code> 用于检查自己写的promise是否符合promise规范</li></ul>
<h3 class="heading">简单实现 待完善</h3>
<pre class="blockcode"><code class="hljs javascript copyable"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Promise</span>(<span class="hljs-params">executor</span>)</span>{
<span class="hljs-keyword">let</span> self = <span class="hljs-keyword">this</span>;
self.value = <span class="hljs-literal">undefined</span>; <span class="hljs-comment">// 成功时的参数</span>
self.reason = <span class="hljs-literal">undefined</span>; <span class="hljs-comment">// 失败时的参数</span>
self.status = <span class="hljs-string">'pending'</span>; <span class="hljs-comment">// 状态 </span>
self.onResolvedCallbacks = [];<span class="hljs-comment">// 存放then中成功的回调 </span>
self.onRejectedCallbacks = []; <span class="hljs-comment">// 存放then中失败的回调 </span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">resolve</span>(<span class="hljs-params">value</span>)</span>{ <span class="hljs-comment">// </span>
<span class="hljs-keyword">if</span>(self.status === <span class="hljs-string">'pending'</span>){
self.value = value;
self.status = <span class="hljs-string">'resolved'</span>;
self.onResolvedCallbacks.forEach(<span class="hljs-function"><span class="hljs-params">fn</span>=></span>fn());
}
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reject</span>(<span class="hljs-params">reason</span>)</span>{
<span class="hljs-keyword">if</span>(self.status === <span class="hljs-string">'pending'</span>){
self.reason = reason;
self.status = <span class="hljs-string">'rejected'</span>;
self.onRejectedCallbacks.forEach(<span class="hljs-function"><span class="hljs-params">fn</span>=></span>fn());
}
}
<span class="hljs-comment">// 如果函数执行时发生异常 就走到失败中</span>
<span class="hljs-keyword">try</span>{
executor(resolve,reject);
}<span class="hljs-keyword">catch</span>(e){
reject(e);
}
}
<span class="hljs-built_in">Promise</span>.prototype.then = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">onFulfilled,onRejected</span>)</span>{
<span class="hljs-keyword">let</span> self = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">if</span>(self.status === <span class="hljs-string">'resolv |
|
转播
