脚本宝典收集整理的这篇文章主要介绍了

这次聊聊Promise对象

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><strong>欢迎大家前往<a href="https://cloud.tencent.com/developer/?fromSource=waitui" rel="nofollow noreferrer" target="_blank">腾讯云+社区</a>,获取更多腾讯海量技术实践干货哦~</strong></p> <blockquote><p>本文由<a href="https://cloud.tencent.com/developer/user/2221081" rel="nofollow noreferrer" target="_blank">前端林子</a>发表于<a href="https://cloud.tencent.com/developer/column/5154?fromSource=waitui" rel="nofollow noreferrer" target="_blank">云+社区专栏</a> </p></blockquote> <p><a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e是CommonJS提出的一种规范,在ES6中已经原生支持<a href="http://www.js-code.com/tag/promise" title="Promise" target="_blank">Promise</a>对象,非ES6环境可以用Bluebird等库来支持。</p> <h1 id="articleHeader0">0.引入</h1> <p>在js中任务的执行模型有两种:同步模式和异步模式。</p> <p><strong>同步模式</strong>:后一个任务B等待前一个任务A结束后,再执行。任务的执行顺序和任务的排序顺序是一致的。</p> <p><strong>异步模式</strong>:每一个任务有一个或多个回调函数,前一个任务A结束后,不是执行后一个任务B,而是执行任务A的回调函数。而后一个任务B是不等任务A结束就执行。任务的执行顺序,与任务的排序顺序不一致。</p> <p>异步模式编程有四种方法:回调函数(最基本的方法,把B写成A的回调函数)、事件监听(为A绑定事件,当A发生某个事件,就执行B)、发布/订阅,以及本文要介绍的<a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e对象。</p> <p><a href="http://www.js-code.com/tag/promise" title="Promise" target="_blank">Promise</a>是<strong>一个用于处理异步操作的对象</strong>,可以将回调函数写成链式调用的写法,让代码更优雅、流程更加清晰,让我们可以更合理、更规范地进行异步处理操作。它的思想是,每一个异步任务返回一个<a href="http://www.js-code.com/tag/promise" title="浏览关于“Promise”的文章" target="_blank" class="tag_link">Promise</a>对象,该对象有一个then方法,允许指定回调函数。</p> <h1 id="articleHeader1">1.<a href="http://www.js-code.com/tag/promis" title="浏览关于“Promis”的文章" target="_blank" class="tag_link">Promis</a>e的基本知识</h1> <h2 id="articleHeader2">1.1 三种状态</h2> <p>Pend<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g:进行中,刚创建一个Promise实例时,表示初始状态;</p> <p>resolved(fulfilled):resolve方法调用的时候,表示操作成功,已经完成;</p> <p>Rejected:reject方法调用的时候,表示操作失败;</p> <h2 id="articleHeader3">1.2 两个过程</h2> <p>这三种状态只能从pendeng--&gt;resolved(fulfilled),或者pend<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g--&gt;rejected,不能逆向转换,也不能在resolved(fulfilled)和rejected之间转换。并且一旦状态改变,就不会再改变,会一直保持这个结果。</p> <p>汇总上述,创建一个Promise的实例是这样的:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//创建promise的实例 let promise = new Promise((resolve,reject)=>{<br /> //刚创建实例时的状态:pending</p> <p> if('异步操作成功'){<br /> //调用resolve方法,状态从pending变为fulfilled<br /> resolve();<br /> }else{<br /> //调用reject方法,状态从pending变为rejected<br /> reject();<br /> }<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//创建promise的实例</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> promise = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>{ <span class="hljs-comment">//刚创建实例时的状态:pend<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>g</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>(<span class="hljs-string">'异步操作成功'</span>){ <span class="hljs-comment">//调用resolve方法,状态从pending变为fulfilled</span> resolve(); }<span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span>{ <span class="hljs-comment">//调用reject方法,状态从pending变为rejected</span> reject(); } });</code></pre> <h2 id="articleHeader4">1.3 then()</h2> <p>用于绑定处理操作后的处理程序,分别指定fulfilled状态和rejected状态的回调函数,即它的参数是两个函数,第一个用于处理操作成功后的业务,第二个用于处理操作失败后的业务。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//then() promise.then((res)=> {<br /> //处理操作成功后的业务(即Promise对象的状态变为fullfilled时调用)<br /> },(error)=> {<br /> //处理操作失败后的业务(即Promise对象的状态变为rejected时调用)<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//then()</span> promise.then(<span class="hljs-function">(<span class="hljs-params">res</span>)=&gt;</span> { <span class="hljs-comment">//处理操作成功后的业务(即Promise对象的状态变为fullfilled时调用)</span> },(error)=&gt; { <span class="hljs-comment">//处理操作失败后的业务(即Promise对象的状态变为rejected时调用)</span> });</code></pre> <h2 id="articleHeader5">1.4 <a href="http://www.js-code.com/tag/catch" title="catch" target="_blank">catch</a>()</h2> <p>用于处理操作异常的程序,<a href="http://www.js-code.com/tag/catch" title="catch" target="_blank">catch</a>()只接受一个参数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//catch() promise.catch((error)=> {<br /> //处理操作失败后的业务<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//<a href="http://www.js-code.com/tag/catch" title="浏览关于“catch”的文章" target="_blank" class="tag_link">catch</a>()</span> promise.catch(<span class="hljs-function">(<span class="hljs-params">error</span>)=&gt;</span> { <span class="hljs-comment">//处理操作失败后的业务</span> });</code></pre> <p>一般来说,建议不要在then()里面定义rejected状态的回调函数,而是将then()用于处理操作成功,将catch()用于处理操作异常。因为这样做可以捕获then()执行中的错误,也更接近同步中<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a>/catch的写法:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//try-catch // bad promise.then((res)=> {<br /> //处理操作成功后的业务<br /> }, (error)=> {<br /> //处理操作失败后的业务<br /> });</p> <p>// good<br /> promise<br /> .then((res)=> {<br /> //处理操作成功后的业务<br /> })<br /> .catch((error)=> {<br /> //处理操作失败后的业务<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>-catch</span> <span class="hljs-comment">// bad</span> promise.then(<span class="hljs-function">(<span class="hljs-params">res</span>)=&gt;</span> { <span class="hljs-comment">//处理操作成功后的业务</span> }, (error)=&gt; { <span class="hljs-comment">//处理操作失败后的业务</span> }); <span class="hljs-comment">// good</span> promise .then(<span class="hljs-function">(<span class="hljs-params">res</span>)=&gt;</span> { <span class="hljs-comment">//处理操作成功后的业务</span> }) .catch(<span class="hljs-function">(<span class="hljs-params">error</span>)=&gt;</span> { <span class="hljs-comment">//处理操作失败后的业务</span> });</code></pre> <h2 id="articleHeader6">1.5 <a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>()</h2> <p>接受一个<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>作为参数,<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>的元素是Promise实例对象。只有当参数中的实例对象的状态都为fulfilled时,Promise.<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>( )才会有返回。</p> <p>实例代码(可直接在浏览器中打开):</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;></p> <p><head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>Promise实例</title></p> <style type=&quot;text/css&quot;></style> <p> <script type=&quot;text/javascript&quot;> window.onload = () => { //创建实例promise1 let promise1 = new Promise((resolve) => { setTimeout(() => { resolve('promise1操作成功'); console.log('1') }, 3000); });</p> <p> //创建实例promise1 let promise2 = new Promise((resolve) => { setTimeout(() => { resolve('promise1操作成功'); console.log('2') }, 1000); });</p> <p> Promise.all([promise1, promise2]).then((result) => { console.log(result); }); } </script><br /> </head></p> <p><body></p> <div></div> <p></body></p> <p></html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;!DOCTYPE html&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Promise实例<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/css"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span>&gt;</span><span class="javascript"> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a></span>.<a href="http://www.js-code.com/tag/onload" title="浏览关于“onload”的文章" target="_blank" class="tag_link">onload</a> = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-comment">//创建实例promise1</span> <span class="hljs-keyword">let</span> promise1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> { <a href="http://www.js-code.com/tag/setTimeout" title="浏览关于“setTimeout”的文章" target="_blank" class="tag_link">setTimeout</a>(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { resolve(<span class="hljs-string">'promise1操作成功'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'1'</span>) }, <span class="hljs-number">3000</span>); }); <span class="hljs-comment">//创建实例promise1</span> <span class="hljs-keyword">let</span> promise2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> { setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { resolve(<span class="hljs-string">'promise1操作成功'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'2'</span>) }, <span class="hljs-number">1000</span>); }); <span class="hljs-built_in">Promise</span>.<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>([promise1, promise2]).then(<span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> { <span class="hljs-built_in">console</span>.log(result); }); } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></pre> <p>结果(注意看时间):</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016938447?w=1196&amp;h=241" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span>Promise.all()</p> <p>代码说明:</p> <p>1s后,promise2进入fulfilled状态,间隔2s,也就是3s后,promise1也进入fulfilled状态。这时,由于两个实例都进入了fulfilled状态,所以Promise.all()才进入了then方法。</p> <blockquote><p>使用场景:执行某个操作需要依赖多个接口请求回的数据,且这些接口之间不存在互相依赖的关系。这时使用Promise.all(),等到所有接口都请求成功了,它才会进行操作。</p></blockquote> <h2 id="articleHeader7">1.6 race()</h2> <p>和all()的参数一样,参数中的promise实例,只要有一个状态发生变化(不管是成功fulfilled还是异常rejected),它就会有返回,其他实例中再发生变化,它也不管了。</p> <p>实例代码(可直接在浏览器中打开):</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;></p> <p><head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>Promise实例</title></p> <style type=&quot;text/css&quot;></style> <p> <script type=&quot;text/javascript&quot;> window.onload = () => { //创建实例promise1 let promise1 = new Promise((resolve) => { setTimeout(() => { resolve('promise1操作成功'); console.log('1') }, 3000); });</p> <p> //创建实例promise1 let promise2 = new Promise((resolve, reject) => { setTimeout(() => { reject('promise1操作失败'); console.log('2') }, 1000); });</p> <p> Promise.race([promise1, promise2]) .then((result) => { console.log(result); }) .catch((error) => { console.log(error); }) } </script><br /> </head></p> <p><body></p> <div></div> <p></body></p> <p></html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;!DOCTYPE html&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Promise实例<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-built_in">win<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>w</span>.onload = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-comment">//创建实例promise1</span> <span class="hljs-keyword">let</span> promise1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> { setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { resolve(<span class="hljs-string">'promise1操作成功'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'1'</span>) }, <span class="hljs-number">3000</span>); }); <span class="hljs-comment">//创建实例promise1</span> <span class="hljs-keyword">let</span> promise2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> { setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { reject(<span class="hljs-string">'promise1操作失败'</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'2'</span>) }, <span class="hljs-number">1000</span>); }); <span class="hljs-built_in">Promise</span>.race([promise1, promise2]) .then(<span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> { <span class="hljs-built_in">console</span>.log(result); }) .catch(<span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> { <span class="hljs-built_in">console</span>.log(error); }) } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></pre> <p>结果(注意看时间):</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016938448" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span>Promise.race()</p> <p>代码说明:</p> <p>1s后,promise2进入rejected状态,由于一个实例的状态发生了变化,所以Promise.race()就立刻执行了。</p> <h1 id="articleHeader8">2 实例</h1> <p>平时开发中可能经常会遇到的问题是,要用ajax进行多次请求。例如现在有三个请求,请求A、请求B、请求C。请求C要将请求B的请求回来的数据做为参数,请求B要将请求A的请求回来的数据做为参数。</p> <p>按照这个思路,我们可能会直接写出这样的层层嵌套的代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//------请求A 开始--------- $.ajax({ success:function(res1){ //------请求B 开始---- $.ajax({ success:function(res2){ //----请求C 开始--- $.ajax({ success:function(res3){ } }); //---请求C 结束--- } }); //------请求B 结束----- } }); //------请求A 结束---------" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//------请求A 开始---------</span> $.ajax({ <span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params">res1</span>)</span>{ <span class="hljs-comment">//------请求B 开始----</span> $.ajax({ <span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res2</span>)</span>{ <span class="hljs-comment">//----请求C 开始---</span> $.ajax({ <span class="hljs-attr">success</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res3</span>)</span>{ } }); <span class="hljs-comment">//---请求C 结束---</span> } }); <span class="hljs-comment">//------请求B 结束-----</span> } }); <span class="hljs-comment">//------请求A 结束---------</span></code></pre> <p>在请求A的success后,请求B发送请求,在请求B 的success后,请求C发送请求。请求C结束后,再向上到请求B结束,请求B结束后,再向上到请求A结束。</p> <p>这样虽然可以完成任务,但是代码层层嵌套,代码可读性差,也不便于调试和后续的代码维护。而如果用Promise,你可以这样写(示意代码,无ajax请求):</p> <p>此处附上完整可执行代码,可在浏览器的控制台中查看执行结果:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;></p> <p><head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>Promise实例</title></p> <style type=&quot;text/css&quot;></style> <p> <script type=&quot;text/javascript&quot;> window.onload = () => { let promise = new Promise((resolve, reject) => {</p> <p> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a> (<a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a>) { //调用操作成功方法 resolve('操作成功'); } <a href="http://www.js-code.com/tag/else" title="else" target="_blank">else</a> { //调用操作异常方法 reject('操作异常'); } });</p> <p> //then处理操作成功,catch处理操作异常 promise.then(requestA) .then(requestB) .then(requestC) .catch(requestError);</p> <p> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> requestA() { console.log('请求A成功'); <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> '下一个是请求B'; } <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> requestB(res) { console.log('上一步的结果:' + res); console.log('请求B成功'); <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> '下一个是请求C'; } <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> requestC(res) { console.log('上一步的结果:' + res); console.log('请求C成功'); } <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> requestError() { console.log('请求失败'); } } </script><br /> </head></p> <p><body></p> <div></div> <p></body></p> <p></html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;!DOCTYPE html&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Promise实例<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-keyword">let</span> promise = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> { <span class="hljs-keyword">if</span> (<span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>) { <span class="hljs-comment">//调用操作成功方法</span> resolve(<span class="hljs-string">'操作成功'</span>); } <span class="hljs-keyword">else</span> { <span class="hljs-comment">//调用操作异常方法</span> reject(<span class="hljs-string">'操作异常'</span>); } }); <span class="hljs-comment">//then处理操作成功,catch处理操作异常</span> promise.then(requestA) .then(requestB) .then(requestC) .catch(requestError); <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">requestA</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'请求A成功'</span>); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> <span class="hljs-string">'下一个是请求B'</span>; } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">requestB</span>(<span class="hljs-params">res</span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'上一步的结果:'</span> + res); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'请求B成功'</span>); <span class="hljs-keyword">return</span> <span class="hljs-string">'下一个是请求C'</span>; } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">requestC</span>(<span class="hljs-params">res</span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'上一步的结果:'</span> + res); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'请求C成功'</span>); } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">requestError</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'请求失败'</span>); } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></pre> <p>结果如下:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016938449" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="img" title="img" style="cursor: pointer;"></span>实例</p> <p>可以看出请求C依赖请求B的结果,请求B依赖请求A的结果,在请求A中是使用了<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a>将需要的数据返回,传递给下一个then()中的请求B,实现了参数的传递。同理,请求B中也是用了<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a>,将参数传递给了请求C。</p> <h1 id="articleHeader9">3.小结</h1> <p>本文主要介绍了Promise对象的三个状态和两个过程。“三个状态”是:初始化、操作成功、操作异常,“两个过程”是初始化状态到操作成功状态,和初始化状态到操作异常状态。除此之前,还有两种实例方法:then()、catch()来绑定处理程序。类方法:Promise.all()、Promise.race()。如有问题,欢迎指正。</p> <blockquote><p> <strong>相关阅读</strong><br /><a href="https://cloud.tencent.com/developer/edu/course-1128?fromSource=waitui" rel="nofollow noreferrer" target="_blank">【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识</a> </p></blockquote> <p><strong>此文已由作者授权腾讯云+社区发布,更多原文请<a href="https://cloud.tencent.com/developer/article/1359152?fromSource=waitui" rel="nofollow noreferrer" target="_blank">点击</a></strong></p> <p><strong>搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!</strong></p> <p>海量技术实践经验,尽在<a href="https://cloud.tencent.com/developer?fromSource=waitui" rel="nofollow noreferrer" target="_blank">云加社区</a>!</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

这次聊聊Promise对象

全部内容,希望文章能够帮你解决

这次聊聊Promise对象

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过