从 angularJs 中的控制器同时调用 $http 服务？

Question

我正在从 angularJs 中的控制器调用许多服务，我的一些代码取决于其他服务结果。有时它运行良好，但有时我会收到未定义的错误，因为服务执行未完成。

如果我正在等待服务执行完成（嵌套代码，即一个服务在另一个服务成功函数中等），这意味着嵌套 $http 请求仅在父级完成后启动一次，这将影响性能. 我该如何解决这种情况？

示例代码，

              //init client list
            clientService.list().success(function (data, status) {
                $scope.clients = data.data;
                console.log('clients retrieved');

                //sales person
                settingService.getSalesPerson().success(function (data, status) {
                    $scope.sales_persons = data;
                    console.log('sales persons retrieved');

                    //init item list
                    itemService.list().success(function (data, status) {
                        $scope.items = data.data;
                        console.log('items retrieved');

                        //quotation settings
                        settingService.getQuotationSettings().success(function (data, status) {
                            var qty = data[0];
                            $scope.quotation.note = data[0].note;
                            $scope.quotation.terms_and_condition = data[0].terms_and_condition;
                            console.log('settings retrieved');

                            //when change client,updating the address
                            var watchClientModel = function () {
                                $scope.$watch('selectedClient', function () {
                                    $scope.quotation.client_id = $scope.selectedClient.id;
                                    $scope.quotation.billing_street = $scope.selectedClient.address_info.billing_street;
                                    $scope.quotation.billing_city = $scope.selectedClient.address_info.billing_city;
                                    $scope.quotation.billing_pobox = $scope.selectedClient.address_info.billing_pobox;
                                    $scope.quotation.billing_country = $scope.selectedClient.address_info.billing_country;
                                    $scope.quotation.shipping_street = $scope.selectedClient.address_info.shipping_street;
                                    $scope.quotation.shipping_city = $scope.selectedClient.address_info.shipping_city;
                                    $scope.quotation.shipping_pobox = $scope.selectedClient.address_info.shipping_pobox;
                                    $scope.quotation.shipping_country = $scope.selectedClient.address_info.shipping_country;
                                });
                            };
                            var watchSalesPersonModel = function () {
                                $scope.$watch('selectedPerson', function () {
                                    $scope.quotation.sales_person_id = $scope.selectedPerson.id;
                                    console.log('Sales person updated');
                                });
                            };
                            //when udpate
                            if ($scope.isUpdate) {
                                //Create Quotation
                                $scope.pageTitle = "Edit Quotation";
                                $scope.pageTitleIcon = "fa fa-pencil";
                                //init quotaion details
                                quotationService.get($routeParams.quotationId).success(function (data, status) {
                                    $scope.quotation = data;
                                    //get clients
                                    $scope.selectedClient = _.findWhere($scope.clients, {id: $scope.quotation.client_id});
                                    console.log('Client preselected');
                                    //get sales person
                                    $scope.selectedPerson = _.findWhere($scope.sales_persons, {id: $scope.quotation.sales_person_id});
                                    console.log('Sales  person preselected');
                                });
                            } else {
                                //when insert
                                $scope.selectedClient = $scope.clients[0];
                                $scope.selectedPerson = $scope.sales_persons[0];
                                $scope.quotation.items.push({
                                    'item': null,
                                    'quantity': 0.00,
                                    'rate': 0.00
                                });
                                if (qty.auto_generate) {
                                    $scope.quotation.quotation_number = qty.prefix_string + 1000 + Math.floor((Math.random() * 100000) + 1);
                                }
                            }
                            watchClientModel()
                            watchSalesPersonModel();
                        });
                    });
                });
            });

我在这里将所有服务调用作为嵌套 ladder.it 工作正常但影响性能。

如果我把所有服务调用都带回外面，得到的错误是$scope.selectedClient is undefined

Answer 1

如果您有不相互依赖的查询，您可以将它们彼此分开执行，然后等待结果：

//init client list
var clients = clientService.list().success(function (data, status) {
    $scope.clients = data.data;
    console.log('clients retrieved');
});

//sales person
var sales = settingService.getSalesPerson().success(function (data, status) {
    $scope.sales_persons = data;
    console.log('sales persons retrieved');
});

//init item list
var items = itemService.list().success(function (data, status) {
    $scope.items = data.data;
    console.log('items retrieved');
});

//quotation settings
var quotes = settingService.getQuotationSettings().success(function (data, status) {
    $scope.qty = data[0];
    $scope.quotation.note = data[0].note;
    $scope.quotation.terms_and_condition = data[0].terms_and_condition;
    console.log('settings retrieved');
});

//when change client,updating the address
$scope.$watch('selectedClient', function () {
     var selectedClient = $scope.selectedClient,
         address_info = selectedClient.address_info,
         quotation = $scope.quotation;

     quotation.client_id = selectedClient.id;
     quotation.billing_street = address_info.billing_street;
     quotation.billing_city = address_info.billing_city;
     quotation.billing_pobox = address_info.billing_pobox;
     quotation.billing_country = address_info.billing_country;
     quotation.shipping_street = address_info.shipping_street;
     quotation.shipping_city = address_info.shipping_city;
     quotation.shipping_pobox = address_info.shipping_pobox;
     quotation.shipping_country = address_info.shipping_country;
});

$scope.$watch('selectedPerson', function () {
    $scope.quotation.sales_person_id = $scope.selectedPerson.id;
    console.log('Sales person updated');
});

// when all finished loading
$q.all([clients, sales, items, quotes]).then(function () {
    // when udpate
    if ($scope.isUpdate) {
        //Create Quotation
        $scope.pageTitle = "Edit Quotation";
        $scope.pageTitleIcon = "fa fa-pencil";

        //init quotaion details
        quotationService.get($routeParams.quotationId).success(function (data, status) {
            $scope.quotation = data;
            //get clients
            $scope.selectedClient = _.findWhere($scope.clients, {id: $scope.quotation.client_id});
            console.log('Client preselected');
            //get sales person
            $scope.selectedPerson = _.findWhere($scope.sales_persons, {id: $scope.quotation.sales_person_id});
            console.log('Sales  person preselected');
        });
    } else {
        //when insert
        $scope.selectedClient = $scope.clients[0];
        $scope.selectedPerson = $scope.sales_persons[0];
        $scope.quotation.items.push({
            'item': null,
            'quantity': 0.00,
            'rate': 0.00
        });
        if (qty.auto_generate) {
            $scope.quotation.quotation_number = $scope.qty.prefix_string + 1000 + Math.floor((Math.random() * 100000) + 1);
        }
    }
});

从 angularJs 中的控制器同时调用 $http 服务？

Calling simultaneous $http services from controller in angularJs?

javascript

php

normalize

promise

angularjs