AngularJS Promise Chainingで同じデータが返されます

Question

必要なデータを取得するためにページが読み込まれたときに3回API呼び出しを行います。 私のアプリケーションはAngularJS＃1.5.8です。私は別々のサービスでデータを持ち出すことができますが、何らかの理由で、コントローラで最初のAPI呼び出しのデータが3回すべて返されます。 3つのAPI呼び出しの間に依存関係はありません。ここで

はここ

// app.module.js 
(function() { 

    angular 
    .module('SomeAppName', []) 
    .controller('DDCtrl', DDCtrl); 

    DDCtrl.$inject = ['$scope', 'ApiService'] 

    function DDCtrl($scope, ApiService) { 

    var vm = this; 

    vm.qddData = []; 
    vm.rddData = []; 
    vm.sddData = []; 

    activate(); 

    function activate() { 

     ApiService.getNumberData('api/get.first.data.php') 
     .then(function (firstdata) { 
      console.log(firstdata); 
      vm.qddData = firstdata; 
      return ApiService.getNumberData('api/get.second.data.php'); 
     }) 
     .then(function (seconddata) { 
      console.log(seconddata); // logs firstdata instead of seconddata 
      vm.rddData = seconddata; 
      return ApiService.getNumberData('api/get.third.data.php'); 
     }) 
     .then(function (thirddata) { 
      console.log(thirddata); // logs firstdata instead of thirddata 
      vm.sddData = thirddata; 
     }) 
     .catch(function (err) { 
      console.log(err.data); 
     }); 
    } 
    } 
})(); 

が正しくない

// app.service.js 
(function() { 

    angular 
    .module('SomeAppName') 
    .factory('ApiService', ApiService); 

    ApiService.$inject = ['$http', '$q']; 

    function ApiService($http, $q) { 

    var deferred = $q.defer(); 

    return { 
     getNumberData: getNumberData 
    }; 

    function getNumberData(dictUrl) { 
     return $http.get(apiUrl) 
     .then(getRequestComplete) 
     .catch(getRequestFailed); 
    } 

    function getRequestComplete(response) { 
     console.log(response.data); // here the data is logged correctly 
     deferred.resolve(response.data); 
     return deferred.promise; 
    } 

    function getRequestFailed(error) { 
     deferred.reject(error); 
     return deferred.promise; 
    } 
    } 

})(); 

Answer 1

脅威は、すべてのhttp要求のためのあなたのApiService、あなたが維持されている単一deferオブジェクトの内部にある私のデータサービスである私のコントローラのコードです。むしろ私はあなたのカスタムpromise（アンチパターンとみなす）を作成する必要はないと言うことができます。 $http.get &コールバックのデータを返すことで約束を利用するだけです。

コード

(function() { 

    angular 
    .module('SomeAppName') 
    .factory('ApiService', ApiService); 

    ApiService.$inject = ['$http', '$q']; 

    function ApiService($http, $q) { 
    //no need to create a custom defer object at all 
    //var deferred = $q.defer(); 

    return { 
     getNumberData: getNumberData 
    }; 

    function getNumberData(dictUrl) { 
     return $http.get(apiUrl) 
     .then(getRequestComplete) 
     .catch(getRequestFailed); 
    } 

    function getRequestComplete(response) { 
     return response.data; //return a data to chain promise with success 
    } 

    function getRequestFailed(error) { 
     return $q.reject(error); //reject to call error function of subsequent chain promise 
    } 
    } 

})();