angularjs 系列之$q和promise

还是同一个项目,在项目中,发现多个controller之内有一个共同的服务器请求,当时只是不断的重复使用,如今,现在项目结束,代码开始走向了优化迭代的阶段;

首先,我的思路是把这个共同的请求,从controller里抽出来,做成一个服务,然后在需要的controller里注入;

第一个问题是请求服务器数据:

var app = angular.module('testApp',['ui.bootstrap']);
app.factory('myService',['$http','$q',function($http,$q){
    return {  
        query : function() {  
            var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行  
            
            $http({method: 'GET', url: 'data.php'}).success(function(data, status, headers, config) {  
            
                deferred.resolve(data);  // 声明执行成功,即http请求数据成功,可以返回数据了  
                
            }).error(function(data, status, headers, config) {  
            
                deferred.reject(data);   // 声明执行失败,即服务器返回错误  
                
            });  
            
            return deferred.promise;   // 返回承诺,这里并不是最终数据,而是访问最终数据的API  
        }, // end query 
        title : '页面标题设置'
    };  
}]);

至于promise,这里我简单的说,他是一个对象,也是一种异步编程模式,要了解详细,请到这里js 异步编程

服务创建之后,把服务创建到controller里,调用就可以跑起来了。

app.controller('myController',function($scope,myService){
    var use = myService.query(); //调用服务里的query函数
    use.then(function(data){//then是回调函数,里面可以写user.then(successFun(),errFun());
        $scope.version = data;//data 是promise的返回数据
    });
    setTimeout(function(){
        console.log($scope.version);
    },1);
    
    var tit = myService.title;
    $scope.title = tit;
});

这个是使用factory创建的服务,创建服务还有其他方式:service()、provider()等;

这个例子是关于服务里中包含服务器交互的一个方法,需要的小伙伴可以参考;

注意:服务里不能注入$scope这个对象

posted @ 2016-06-21 11:51  一步小僧  阅读(240)  评论(0编辑  收藏  举报
一步小僧哈哈