防止在 AngularJS 中获取请求中的重复代码

Question

我有一个过滤器按钮上的手表。当用户点击它时，它会调用观察者。 我需要向服务器发送获取请求。获取响应，保存并立即询问下一个获取请求。一个接一个。

$scope.$watch('dataService.getValue()', function (newValue, oldValue) {
        if (newValue !== oldValue) {

            var selectedValue = $scope.dataFilterService.getValue();
            $scope.httpService.getFilteredData(selectedValue).then(function (response) {
                var filteredData = response.data;
                $scope.httpService.getFilteredData2(selectedValue ).then(function (response) {
                    var filteredData2 = response.data;
                    $scope.httpService.getData3().then(function (response) {
                        var filteredData3 = response.data;
                        $scope.httpService.getData4().then(function (response) {
                            var filteredData4= response.data;
                            $scope.httpService.getData5().then(function (response) {
                                var filteredData5= response.data;

                                $scope.dataToMapService.init(filteredData, filteredData2 , filteredData3, filteredData4, filteredData5);


                            }, function (error) {
                                $scope.errorService.handleError(error);
                            });


                        }, function (error) {
                            that.errorService.handleError(error);
                        });
                    }, function (error) {
                        that.errorService.handleError(error);
                    });
                }, function (error) {
                    that.errorService.handleError(error);
                });

            }, function (error) {
                that.errorService.handleError(error);
            });

        }
    });

此代码运行良好，但它在两个控制器中重复。

为了防止重复代码，我建议添加新服务并在其中添加代码。但是，它并没有像我预期的那样做。它不等待第一个请求的答案。 我应该怎么做才能更好地编写它并防止重复代码？

Answer 1

使用 $q 和 $http 调用数组来做一个单一的承诺：

angular.module('myApp').factory('getDataService', function ($q, $http, httpService) {

    var service = {
        getData: function () {
            var defer = $q.defer();
            var callChain = [];
            callChain.push(httpService.getFilteredData(selectedValue));
            callChain.push(httpService.getFilteredData2(selectedValue));
            callChain.push(httpService.getData());
            callChain.push(httpService.getData2());
            callChain.push(httpService.getData3());
            $q.all(callChain).then(
                function (results) {
                    console.log(results); //Array of results in the order of the send
                    defer.resolve(results);
                });
            return $q.promise;

        }
    }
    return service;
}).controller('myCtrl', ['$scope', 'getDataService', function($scope, getDataService) {

    getDataService.getData().then(function(result) {
        console.log(results); //Array of results in the order of the send
    });
}]);