promise对象,以及其在Angular中的使用

来源:互联网 发布:快走丝编程用什么软件 编辑:程序博客网 时间:2024/05/17 08:14

promise一种处理异步编程的模式,可以有效解决回调的繁琐,并以一种同步的方式去处理业务流程,同时,允许在回调中采用链式的写法,处理的代码更加优雅。

这里写图片描述

  想要在Angular中创建一个promise对象,必须在模板中先注入$q服务,并先调用defer方法创建一个延期对象:

    angular.module('myapp',[])        .controller('myController',['$scope','$q',function($scope,$q){            var defer=$q.defer();        }])

  其中,defer是一个延期对象,它包括三个方法:notify resolve reject,以及一个名为promise的属性。
  在这3个方法中,都可以通过value参数进行传值,当调用延期对象的promise属性时,就创建了一个promise对象。
  一旦创建了promise对象,就可以通过调用then的方法来执行延期对象不同操作后的回调函数:
  promise.then(successCallback,errorCallback,notifyCallback)

5.1 promise对象的创建使用

    <div ng-controller='myController'>        <div>            <div>{{t0}}</div>            <div>{{t1}}</div>            <button ng-click='action(true)'>解决</button>            <button ng-click='action(false)'>拒绝</button>        </div>    </div>    <script type="text/javascript">    angular.module('myapp',[])        .controller('myController',['$scope','$q',function($scope,$q){            var defer=$q.defer();            $scope.action=function(type){                defer.notify(0);                type?defer.resolve(1):defer.reject(1);            }            var promise=defer.promise;            promise.then(function(n){                n++;                $scope.t1='已处理完成:'+n;            },function(n){                n++;                $scope.t1='未完成原因:'+n;            },function(n){                n++;                $scope.t0='正在处理中:'+n;            })        }])    </script>

  值得注意的是,无论是调用resolve还是reject,都需要首先调用notify
  此外,在$q中,还有一个all方法,该方法的功能是返回一个新的promise对象,方法的参数是一个promise数组,当数组中所有的defer都解决时,才会饭一个解决后的promise对象,否则,只要有一个defer对象调用了reject,那么,返回对象也将调用reject方法。

5.2 promise$Http中的应用

    <div ng-controller='myController'>        <div>            {{result}}        </div>    </div>    <script type="text/javascript">    angular.module('myapp',[])        .factory('async',['$q','$http',function($q,$http){            var defer=$q.defer();            $http.get('/async')            .then(function(data){                defer.resolve(data);            },function(reason){                defer.reject(reason);            });            return defer.promise;        }])        .controller('myController',['$scope','async',function($scope,async){            var promise=async;            promise.then(function(resp){                $scope.result='请求成功:'+resp.data;            },function(resp){                $scope.result='请求成功:'+resp;            })        }])    </script>

  对应的服务器端代码(Express):

    app.get('/async',function(req,res){        res.send('今天天气不错。');    });
1 0
原创粉丝点击