angular中使用promise

自由飞翔的雄鹰 發表於 2019-5-8 18:52:00

<p>promise是一种用异步的方式处理值的方法，promise是对象，代表了一个函数最终可能的返回值或者抛出的异常，在与远程对象打交道时我们可以把他看作是远程对象的一个代理。如果说是promise也是异步处理方式的一种，那么我们会想起它和XHR和$.ajax有啥区别呢？ </p>
<p>     习惯上js使用闭包或者回调来相应非同步返回的数据，比如页面加载之后的XHR请求。我们可以跟数据进行正常交互，就好像它已经返回了一样，而不需要依赖回调函数的触发。</p>
<p>     那么ng提出的promise是为了解决什么问题呢？回调已经被使用了很长时间，通常如果有回调依赖其他还回调时将会时调试变得非常艰难，每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象：这些函数返回promise对象。</p>
<p>     从一定层面上看ng改变的不是简单的改变代码风格，而是让我对一些思维习惯发起了反思和改善。</p>
<p>常规模式，即回调方法：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_522344" class="syntaxhighlighterhtml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain">User.get(fromId,{</code></div>
<div class="line number2 index1 alt1"><code class="html spaces">    </code><code class="html plain">success:function(){</code></div>
<div class="line number3 index2 alt2"><code class="html spaces">          </code><code class="html plain">user.friends.find(toId,function(){})</code></div>
<div class="line number4 index3 alt1"><code class="html spaces">    </code><code class="html plain">},</code></div>
<div class="line number5 index4 alt2"><code class="html spaces">    </code><code class="html plain">failure:function(){}</code></div>
<div class="line number6 index5 alt1"><code class="html plain">})</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>使用ng的$q模式</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_452903" class="syntaxhighlighterhtml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain">User.get(fromId).</code></div>
<div class="line number2 index1 alt1"><code class="html spaces">   </code><code class="html plain">then(function(user){</code></div>
<div class="line number3 index2 alt2"><code class="html spaces"> </code> </div>
<div class="line number4 index3 alt1"><code class="html spaces">    </code><code class="html plain">},function(err){</code></div>
<div class="line number5 index4 alt2"><code class="html spaces"> </code> </div>
<div class="line number6 index5 alt1"><code class="html plain">})</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> 使用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步，基于同步函数我们可以按照预期来捕获返回值和异常值。可以在程序中的任何时刻捕捉错误，并且绕过依赖于程序异常的后续代码，我们不需要思考这个同步带来的好处。因此使用promise的目的是：获取功能组合和错误冒泡能力的同时，保持代码异步运行的能力。</p>
<p>      promise是头等对象，自带了一些约定。</p>
<ul>
<li><strong>只有一个resolve或者reject会被调用到</strong>。</li>
<li><strong>如果promise被执行或者被拒绝了，依赖于他们的处理程序仍然会被调用</strong>。</li>
<li><strong>处理程序总是会被异步调用</strong>。</li>
</ul>
<p>    要创建一个deferred对象，可以调用defer()方法； var deferred= $q.defer()</p>
<p>     deferred对象暴露了三个方法，以及一个可以用于处理promise的promise属性。</p>
<ul>
<li>
<ul>
<li><strong>resolve(value)。 deferred.resolve({name:"Kobe",Age:36});</strong></li>
<li><strong>reject(reason)。 deferred.reject("Can't update user");</strong></li>
<li><strong>notify(value)。这个方法用promise的执行状态进行响应。</strong></li>
<li><strong>then(successFn,errFn,notifyFn)。</strong></li>
<li><strong>catch(errFn)。</strong></li>
<li><strong>finally(callback)。finally允许我们观察promise的执行或者拒绝，而无需修改结果的值。通常就做一些资源的清理工作。</strong></li>
</ul>
</li>
</ul>
<p>链式请求：　　</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_537654" class="syntaxhighlighterhtml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain">GitHubService.then(function(data){</code></div>
<div class="line number2 index1 alt1"><code class="html spaces"> </code> </div>
<div class="line number3 index2 alt2"><code class="html plain">}).then(function(data){</code></div>
<div class="line number4 index3 alt1"><code class="html spaces">    </code><code class="html plain">$scope.Users=data;</code></div>
<div class="line number5 index4 alt2"><code class="html plain">});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>完整例子：</p>
<p>app.js</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_975945" class="syntaxhighlighterhtml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain">angular.module('startApp',[</code></div>
<div class="line number2 index1 alt1"><code class="html spaces">    </code><code class="html plain">'service',</code></div>
<div class="line number3 index2 alt2"><code class="html spaces">    </code><code class="html plain">'demo-controller'</code></div>
<div class="line number4 index3 alt1"><code class="html plain">])</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>controller.js</p>
<p>　</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_200491" class="syntaxhighlighterhtml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain">angular.module('demo-controller',['service'])</code></div>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="html plain">.controller('demoCtrl',function(BaseService,$scope,$q){</code></div>
<div class="line number4 index3 alt1"><code class="html spaces">    </code> </div>
<div class="line number5 index4 alt2"><code class="html spaces">    </code><code class="html plain">BaseService.getNews()</code></div>
<div class="line number6 index5 alt1"><code class="html spaces">    </code><code class="html plain">.then(function(success){</code></div>
<div class="line number7 index6 alt2"><code class="html spaces">        </code><code class="html plain">$scope.newLists = success.newslist;</code></div>
<div class="line number8 index7 alt1"><code class="html spaces">    </code><code class="html plain">},function(error){</code></div>
<div class="line number9 index8 alt2"><code class="html spaces">        </code><code class="html plain">console.log(error);</code></div>
<div class="line number10 index9 alt1"><code class="html spaces">    </code><code class="html plain">})</code></div>
<div class="line number11 index10 alt2"><code class="html plain">})</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>service.js</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_972920" class="syntaxhighlighterhtml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain">angular.module('service',[])</code></div>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="html plain">.service('BaseService',baseService);</code></div>
<div class="line number4 index3 alt1"> </div>
<div class="line number5 index4 alt2"> </div>
<div class="line number6 index5 alt1"> </div>
<div class="line number7 index6 alt2"><code class="html plain">function baseService($q,$http){</code></div>
<div class="line number8 index7 alt1"><code class="html spaces">    </code><code class="html plain">this.page = 1;</code></div>
<div class="line number9 index8 alt2"><code class="html spaces">    </code><code class="html plain">this.num = 10;</code></div>
<div class="line number10 index9 alt1"><code class="html spaces">    </code><code class="html plain">this.baseUrl = 'http://api.huceo.com/guonei/?key=eea12a5aad62c67d0052a563bc86c9e5';</code></div>
<div class="line number11 index10 alt2"><code class="html spaces">    </code> </div>
<div class="line number12 index11 alt1"><code class="html spaces">    </code><code class="html plain">this.getNews = function(){</code></div>
<div class="line number13 index12 alt2"><code class="html spaces">        </code> </div>
<div class="line number14 index13 alt1"><code class="html spaces">        </code><code class="html plain">var deferred = $q.defer();</code></div>
<div class="line number15 index14 alt2"><code class="html spaces">        </code><code class="html plain">//</code></div>
<div class="line number16 index15 alt1"><code class="html spaces">        </code><code class="html plain">$http.get(this.baseUrl,{</code></div>
<div class="line number17 index16 alt2"><code class="html spaces">             </code><code class="html plain">params:{</code></div>
<div class="line number18 index17 alt1"><code class="html spaces">                </code><code class="html plain">key:"eea12a5aad62c67d0052a563bc86c9e5",</code></div>
<div class="line number19 index18 alt2"><code class="html spaces">                </code><code class="html plain">num:10,</code></div>
<div class="line number20 index19 alt1"><code class="html spaces">                </code><code class="html plain">page:1</code></div>
<div class="line number21 index20 alt2"><code class="html spaces">              </code><code class="html plain">}</code></div>
<div class="line number22 index21 alt1"><code class="html spaces">        </code><code class="html plain">})</code></div>
<div class="line number23 index22 alt2"><code class="html spaces">        </code><code class="html plain">.success(function(success){</code></div>
<div class="line number24 index23 alt1"><code class="html spaces">            </code><code class="html plain">deferred.resolve(success);</code></div>
<div class="line number25 index24 alt2"><code class="html spaces">        </code><code class="html plain">})</code></div>
<div class="line number26 index25 alt1"><code class="html spaces">        </code><code class="html plain">.error(function(error){</code></div>
<div class="line number27 index26 alt2"><code class="html spaces">            </code><code class="html plain">deferred.reject(error);</code></div>
<div class="line number28 index27 alt1"><code class="html spaces">        </code><code class="html plain">})</code></div>
<div class="line number29 index28 alt2"><code class="html spaces">        </code> </div>
<div class="line number30 index29 alt1"><code class="html spaces">        </code><code class="html plain">return deferred.promise;</code></div>
<div class="line number31 index30 alt2"><code class="html spaces">    </code><code class="html plain">}</code></div>
<div class="line number32 index31 alt1"><code class="html plain">}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>demo.html</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_475148" class="syntaxhighlighterhtml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="html plain"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div>
<div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en" ng-app="startApp"></code></div>
<div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div>
<div class="line number4 index3 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8" /></code></div>
<div class="line number5 index4 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>Document</</code><code class="html keyword">title</code><code class="html plain">></code></div>
<div class="line number6 index5 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html plain">src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.js"></</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number7 index6 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html plain">src="js/app.js"></</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number8 index7 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html plain">src="js/service.js"></</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number9 index8 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html plain">src="js/controller.js"></</code><code class="html keyword">script</code><code class="html plain">></code></div>
<div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div>
<div class="line number11 index10 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div>
<div class="line number12 index11 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">ng-controller="demoCtrl"></code></div>
<div class="line number13 index12 alt2"><code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">ul</code><code class="html plain">></code></div>
<div class="line number14 index13 alt1"><code class="html spaces">            </code><code class="html plain"><</code><code class="html keyword">li</code> <code class="html plain">ng-repeat="item in newLists">{{item.title}}</</code><code class="html keyword">li</code><code class="html plain">></code></div>
<div class="line number15 index14 alt2"><code class="html spaces">        </code><code class="html plain"></</code><code class="html keyword">ul</code><code class="html plain">></code></div>
<div class="line number16 index15 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div>
<div class="line number17 index16 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div>
<div class="line number18 index17 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/fw282204258/p/10833725.html

頁: [1]

琼殿技术论坛's Archiver

angular中使用promise