angularjs 系列之$q和promise

Posted 2020-07-28 一步小僧

还是同一个项目，在项目中，发现多个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这个对象；