Другие данные возвращаются в 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

Угроза находится внутри вашего ApiService, вы поддерживаете одного defer объекта для всех ваших http запроса, который не является правильным , Скорее я могу сказать, что вам не нужно создавать свой собственный promise (его рассматривать как анти-шаблон). Просто используйте обещание возврата $http.get & цепью, возвращая данные из своего обратного вызова success.

Код

(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 
    } 
    } 

})();