javascript - 如何在 AngularJs 中使用相互依赖的并行和顺序函数调用？

Question

服务

(function () {
    'use strict';

    angular
        .module('app.user')
        .factory('myService', Service);

    Service.$inject = ['$http', 'API_ENDPOINT', '$q'];

    /* @ngInject */
    function Service($http, API_ENDPOINT, $q) {


        var getUserDetails = function (paramData) {
            return $q(function (resolve, reject) {
                $http.get(API_ENDPOINT.url + '/user/details', paramData).then(function (result) {
                    if (result.data.success) {
                        resolve(result.data);
                    } else {
                        reject(result.data.msg);
                    }
                });
            });
        };

        var getCountryDetails = function (paramData) {
            return $q(function (resolve, reject) {
                $http.get(API_ENDPOINT.url + '/country/details', paramData).then(function (result) {
                    if (result.data.success) {
                        resolve(result.data);
                    } else {
                        reject(result.data.msg);
                    }
                });
            });
        };


        return {
            getUserDetails: getUserDetails,
            getCountryDetails: getCountryDetails
        };
    }
})();

控制者

(function () {
    'use strict';

angular
    .module('app.user')
    .controller('myService');

/* @ngInject */
function UserCtrl(userService,countryService) {
    var vm = this;

    vm.onCountryChange = function (id) {
        vm.states = vm.countries.filter(function (item) {
            return item.id === id;
        })[0].states;
    };

    function init() {

        var token = window.localStorage.getItem('TOKEN');
        vm.userData = jwt_decode(token);

        // gets all country and its states
        myService.getCountryDetails()
            .then(function(msg){
                vm.countries = msg.data;
            },function(errMsg){
                console.log(errMsg)
            });

        var paramData = {
            params : {
                id : vm.userData.id
            }
        };


       // gets user data 

        myService.getUserDetails(paramData)
            .then(function (msg) {
                vm.user = msg.data.map(function (obj) {
                    var rObj = {
                        name: obj.name,
                        email: obj.email,
                        country : obj.country.id,
                        state : obj.state.id
                    };
                    return rObj;
                })[0];
                // once user data is fetched it takes user country and then pass to filter function to get all its state
                vm.onCountryChange(vm.user.country.id)
            }, function (errMsg) {

            });
    }
    init();
}
})();

这里 onCountryChange() 似乎在获取用户国家 ID 之前加载得更早，为了优化我可以并行调用两个服务来获取数据，一旦请求完成并设置了用户对象，可以触发 onCountryChange(countryId) 以获取用户所属国家/地区的所有状态。

发出两个并行的http请求有用吗？

如何确定所有请求何时完成，然后才调用第二个函数？

Answer 1

这里有两个选项(都可以):

选项 1: 构建一个在 myService .getCountryDetails.then 中调用 getUserDetails 的 promise 链，这样您就不必更改getUserDetails

逻辑

选项 2: 使用 Promise.all这将使您的 getCountryDetails 和 getUserDetails 并行，这样您就可以调用 vm.onCountryChange(vm.user.country.id) 在 Promise.all(p1, p2).then 而不是 myService.getUserDetails(paramData).then