AngularJS篇 $resource使用筆記

AngularJS文檔中：

$http是針對與server通信的XmlHttpRequest的封裝，擷取資料可以在controller中通過promise的then函數來指派，$http新添加了success和error函數，如：

// Service: $http way.
$http.get("serverData/caseList.json").success(function(data){
    console.log("$http: ", arguments);
    $scope.testList = data;
});      

 通過$resource以一種新的方式來指派資料，封裝了$http傳回的promise為屬性$promise，資料對象或者數組則就是本身Resource：

// 封裝Resource
var modService = angular.module("reportService", ["ngResource"]);
modService.factory("SvcFileRead", ["$resource", function($resource){
　　// 傳回get|save|query|remove|delete(本身就有的)和新的方法：getCaseList|getTestConf.
return $resource("serverData/:file.json", {}, {
　　　　 // 封裝其他的方法
        getCaseList: {
            method: "GET",
            params: {
                file: "caseList"
            },
            isArray: true
        },
        getTestConf: {
            method: "GET",
            params: {
                file: "testConf"
            }
        }
    });
}]);

// 使用Resource      

  modController.controller("reportList", ["SvcFileRead", function(SvcFileRead){

     // controller中指派資料，其實傳回一個Resource，封裝了傳回的資料；

     $scope.caseList = SvcFileRead.getCaseList();

}]);
      

因為上面傳回的Resource，真正資料是在promise被resolve後指派的，是以等待resolve之後才能處理，是以通過$promise屬性來等待：($q.all等待一個promise數組)

$q.all([$scope.caseList.$promise, $scope.testConf.$promise]).then(function(defDataList){
　　　　 // 業務邏輯...
        var list = getTestList(defDataList);
　　　　　// 指派到$scope上
        $scope.testList = list;
});      

當然也可以以新的Resource來封裝業務邏輯，最後傳回：

modService.factory("SvcTestUtil", ["$q", "SvcFileRead", function($q, SvcFileRead){
    return {
        getCaseList: function(){
            var defCaseList = SvcFileRead.getCaseList();
            var defTestCase = SvcFileRead.getTestConf();

            var def = $q.all([defCaseList.$promise, defTestCase.$promise]).then(function(defDataList) {var list = getTestList(defDataList);
                list.forEach(function(v){
              　　　// 待resolve後，填充資料；
　　　　　　　　      ret.push(v);
                });
　　　　　　　　　 // 沒有抛異常，代表resolve，否則reject
                return list;
            });

            // 傳回針對資源的封裝：$promise
            var ret = [];
            ret.$promise = def;

            return ret;
        }
    };
}]);

// controller中使用同上：
      

  modController.controller("reportList", ["SvcTestUtil", function(SvcTestUtil){

　　 $scope.caseList = SvcTestUtil.getCaseList();

}]);      

 如果在promise的then函數中仍然還有延遲性的處理邏輯，有相應的兩種方式：

// Way1.
setTimeout(function(){
　　$scope.testList = list;
　　$scope.$digest();
}, 2000);

// Way2. true代表invokeApply
$timeout(function(){
　　$scope.testList = list;
}, 2000, true);      

相關連結：

1. $resource　　　　https://docs.angularjs.org/api/ngResource/service/$resource

2. $http　　　　　　https://docs.angularjs.org/api/ng/service/$http

3. $q　　　　　　　  https://docs.angularjs.org/api/ng/service/$http

4. $timeout　　　　https://docs.angularjs.org/api/ng/service/$timeout

轉載于:https://www.cnblogs.com/diydyq/p/4149955.html