加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular中使用promise

发布时间:2020-12-17 17:48:19 所属栏目:安全 来源:网络整理
导读:promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种,那么我们会想起它和XHR和$.ajax有啥区别呢?

promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种,那么我们会想起它和XHR和$.ajax有啥区别呢??

? ? ?习惯上js使用闭包或者回调来相应非同步返回的数据,比如页面加载之后的XHR请求。我们可以跟数据进行正常交互,就好像它已经返回了一样,而不需要依赖回调函数的触发。

? ? ?那么ng提出的promise是为了解决什么问题呢? 回调已经被使用了很长时间,通常如果有回调依赖其他还回调时将会时调试变得非常艰难,每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象:这些函数返回promise对象。

? ? ?从一定层面上看ng改变的不是简单的改变代码风格,而是让我对一些思维习惯发起了反思和改善。

常规模式,即回调方法:

1
2
3
4
5
6
User.get(fromId,{
???? success:function(){
?????????? user.friends.find(toId,function(){})
???? },
???? failure:function(){}
})

使用ng的$q模式

1
2
3
4
5
6
User.get(fromId).
??? then(function(user){
??
???? },function(err){
??
})

?使用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步,基于同步函数我们可以按照预期来捕获返回值和异常值。可以在程序中的任何时刻捕捉错误,并且绕过依赖于程序异常的后续代码,我们不需要思考这个同步带来的好处。因此使用promise的目的是:获取功能组合和错误冒泡能力的同时,保持代码异步运行的能力。

? ? ? promise是头等对象,自带了一些约定。

  • 只有一个resolve或者reject会被调用到
  • 如果promise被执行或者被拒绝了,依赖于他们的处理程序仍然会被调用
  • 处理程序总是会被异步调用

? ? 要创建一个deferred对象,可以调用defer()方法; var deferred= $q.defer()

? ? ?deferred对象暴露了三个方法,以及一个可以用于处理promise的promise属性。

    • resolve(value)。 deferred.resolve({name:"Kobe",Age:36});
    • reject(reason)。 deferred.reject("Can‘t update user");
    • notify(value)。这个方法用promise的执行状态进行响应。
    • then(successFn,errFn,notifyFn)。
    • catch(errFn)。
    • finally(callback)。finally允许我们观察promise的执行或者拒绝,而无需修改结果的值。通常就做一些资源的清理工作。

链式请求:  

1
2
3
4
5
GitHubService.then(function(data){
??
}).then(function(data){
???? $scope.Users=data;
});

完整例子:

app.js

1
2
3
4
angular.module(‘startApp‘,[
???? ‘service‘,
???? ‘demo-controller‘
])

controller.js

 

1
2
3
4
5
6
7
8
9
10
11
angular.module(‘demo-controller‘,[‘service‘])
?
.controller(‘demoCtrl‘,function(BaseService,$scope,$q){
?????
???? BaseService.getNews()
???? .then(function(success){
???????? $scope.newLists = success.newslist;
???? },function(error){
???????? console.log(error);
???? })
})

service.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
angular.module(‘service‘,[])
?
.service(‘BaseService‘,baseService);
?
?
?
function baseService($q,$http){
???? this.page = 1;
???? this.num = 10;
???? this.baseUrl = ‘http://api.huceo.com/guonei/?key=eea12a5aad62c67d0052a563bc86c9e5‘;
?????
???? this.getNews = function(){
?????????
???????? var deferred = $q.defer();
???????? //
???????? $http.get(this.baseUrl,{
????????????? params:{
???????????????? key:"eea12a5aad62c67d0052a563bc86c9e5",
???????????????? num:10,
???????????????? page:1
?????????????? }
???????? })
???????? .success(function(success){
???????????? deferred.resolve(success);
???????? })
???????? .error(function(error){
???????????? deferred.reject(error);
???????? })
?????????
???????? return deferred.promise;
???? }
}

demo.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<! doctype? html>
< html? lang="en" ng-app="startApp">
< head >
???? < meta? charset="UTF-8" />
???? < title >Document</ title >
???? < script? src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.js"></ script >
???? < script? src="js/app.js"></ script >
???? < script? src="js/service.js"></ script >
???? < script? src="js/controller.js"></ script >
</ head >
< body >
???? < div? ng-controller="demoCtrl">
???????? < ul >
???????????? < li? ng-repeat="item in newLists">{{item.title}}</ li >
???????? </ ul >
???? </ div >
</ body >
</ html >

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读