。然後不是一個函數 - 爲AngularJS做一個簡單的函數承諾

Question

我想創建一個模擬練習來幫助我的同事們理解AngularJS。在我的例子中，我希望調用一個服務來提供一個對象數組，我們將把它傳遞給一個控制器，並分配給一個$scope變量（我創建的例子是提供關於披頭士的信息）。我不想爲我的示例構建REST服務，因此我只是要從服務中返回靜態/硬編碼的對象數組。然而，我從服務返回的是不是一個承諾，因此我不能使用.then()方法，或者我應該說，當我嘗試使用它時會出現錯誤。

TypeError: AlbumsService.fetchBeatlesAlbums(...).then is not a function 

因爲我們使用.then()通過$http提供數據時，我想用.then()所以它是類似於現實世界的應用程序。有什麼辦法可以解決這個問題嗎？下面是我的控制器和我的服務......我有評論發生錯誤：

angular.module('beatlesApp', []) // First we state the app name, followed by an array of dependancies 
    // here is our controller... 
    .controller('MainCtrl', ['$scope', function($scope) { 
     // here we can set our $scope variables 
    }]) 

    .controller('ChildCtrl', ['$scope', 'AlbumsService', function($scope, AlbumsService) { 
    // here we can set our $scope variables 

     // HERE WE GET AN ERROR... AlbumsService.fetchBeatlesAlbums(...).then is not a function  
     AlbumsService.fetchBeatlesAlbums().then(function(resp) { 
      $scope.albums = resp; 
     }); 
    }]) 

// This is a service that provides data, in a real world app we would get the data from $http sources 
.service('AlbumsService', function() { 

    this.fetchBeatlesAlbums = function() { 
     return [{ 
      name: 'Please Please Me', 
      released: '1963', 
      pic: 'please.jpg' 
     }, { 
      name: 'With the Beatles', 
      released: '1963', 
      pic: 'with.jpg' 
     }, { 
      name: 'A Hard Day\' s Night', 
      released: '1964', 
      pic: 'hard.jpg' 
     }, { 
      name: 'Beatles For Sale', 
      released: '1964', 
      pic: 'bfs.jpg' 
     }, { 
      name: 'Help!', 
      released: '1965', 
      pic: 'help.jpg' 
     }, { 
      name: 'Rubber Soul', 
      released: '1965', 
      pic: 'rubber.jpg' 
     }, { 
      name: 'Revolver', 
      released: '1966', 
      pic: 'revolver.jpg' 
     }, { 
      name: 'Sgt Pepper\'s Lonely Hearts Club Band', 
      released: '1967', 
      pic: 'splhb.jpg' 
     }]; 
    }; 
}); 

Answer 1

這應該很好地工作：

.service('AlbumsService', function($q) { 

    this.fetchBeatlesAlbums = function() { 
     var defer = $q.defer(); 
     var arr = [{ 
      name: 'Please Please Me', 
      released: '1963', 
      pic: 'please.jpg' 
     }, { 
      name: 'With the Beatles', 
      released: '1963', 
      pic: 'with.jpg' 
     }, { 
      name: 'A Hard Day\' s Night', 
      released: '1964', 
      pic: 'hard.jpg' 
     }, { 
      name: 'Beatles For Sale', 
      released: '1964', 
      pic: 'bfs.jpg' 
     }, { 
      name: 'Help!', 
      released: '1965', 
      pic: 'help.jpg' 
     }, { 
      name: 'Rubber Soul', 
      released: '1965', 
      pic: 'rubber.jpg' 
     }, { 
      name: 'Revolver', 
      released: '1966', 
      pic: 'revolver.jpg' 
     }, { 
      name: 'Sgt Pepper\'s Lonely Hearts Club Band', 
      released: '1967', 
      pic: 'splhb.jpg' 
     }]; 
     defer.resolve(arr) 
     return defer.promise; 
    }; 
}); 

Answer 2

可以結合的$timeout服務使用$q服務返回模仿$http會返回的承諾。

例如：

.service('AlbumsService', function($q, $timeout) { 

    this.fetchBeatlesAlbums = function() { 

     var deferred = $q.defer(); 

     $timeout(function() { 
      deferred.resolve([{ 
       name: 'Please Please Me', 
       released: '1963', 
       pic: 'please.jpg' 
      }, { 
       name: 'With the Beatles', 
       released: '1963', 
       pic: 'with.jpg' 
      }, { 
       name: 'A Hard Day\' s Night', 
       released: '1964', 
       pic: 'hard.jpg' 
      }, { 
       name: 'Beatles For Sale', 
       released: '1964', 
       pic: 'bfs.jpg' 
      }, { 
       name: 'Help!', 
       released: '1965', 
       pic: 'help.jpg' 
      }, { 
       name: 'Rubber Soul', 
       released: '1965', 
       pic: 'rubber.jpg' 
      }, { 
       name: 'Revolver', 
       released: '1966', 
       pic: 'revolver.jpg' 
      }, { 
       name: 'Sgt Pepper\'s Lonely Hearts Club Band', 
       released: '1967', 
       pic: 'splhb.jpg' 
      }]); 
     }, 1000); //Returns after a 1 second delay. 

     return deferred.promise; 
    }; 
}); 

使用$timeout與$q經過短短$q的好處是，你可以用它模仿從一個真正的服務請求數據現實的延遲。