Gleiche Daten werden in AngularJS Promise Chaining zurückgegeben

Question

Ich möchte 3 API-Aufrufe machen, wenn meine Seite geladen ist, um die notwendigen Daten zu bringen. Meine Anwendung ist in AngularJS # 1.5.8. Ich bin in der Lage, die Daten getrennt in Dienst zu bringen, aber aus irgendeinem Grund werden im Controller die Daten des ersten API-Aufrufs alle 3 Mal zurückgegeben. Zwischen den 3 API-Aufrufen besteht keine Abhängigkeit.

Hier ist mein Controller-Code

// 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); 
     }); 
    } 
    } 
})(); 

Hier

meine Datendienst

// 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

Bedrohung in Ihrem ApiService ist, Sie halten an einzelnen defer Objekt für alle http Anforderung, die nicht korrekt ist . Eher kann ich sagen, dass Sie Ihre benutzerdefinierte promise (die als Anti-Pattern betrachten) nicht erstellen müssen. Verwenden Sie einfach Versprechen zurück durch $http.get & Kette es über die Rückgabe einer Daten von seiner success Callback.

-Code

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

})();