Question

想检查我有一个像这样的简单的Web服务资源查询功能

//Get country lists
$scope.getCountry = function(){
    $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    }).success(function(data) {
        $scope.countries = data;
    }).error(function(data) {
        console.log(data);
    });
};

//Get profile 
$scope.getProfile = function(profile_id, select){
     var formatJSON = {
            profile_id: profile_id,
            select: select,
        };
    var json = JSON.stringify(formatJSON);
    var urlsafe = exEncrypt(json);
    ProfileService.profileActions.query({payload:urlsafe}).$promise.then(function(datas){
        $scope.uProfile = datas[0];
        document.querySelector('title').innerHTML = $scope.uProfile.username;
    });  
};

//Initialize update sequence
$scope.initUpdate = function(profile_id, select){
    $scope.getCountry();
    $scope.getProfile(profile_id, select);
}

所以代码所做的就是用户点击“更新”按钮，它将触发ng-click="initUpdate(param1, param2)"功能，然后加载所有功能并向用户显示必要的信息。此功能完美，但有一个问题。因为getCountry()通常返回一个更大的文件大小[~3 - 3.5kb，加载时间~260 ++ ms服务器相关]与普通getProfile()相比[~1 - 2kb，加载时间~200 + + ms服务器依赖]，代码的作用是在加载国家/地区列表之前显示配置文件，在UI页面中最终显示一些未填写的空字段。

所以我最初的做法是将暂停应用于getProfile()这样

$scope.initUpdate = function(profile_id, select){
    $scope.getCountry();
    $timeout(function(){
        $scope.getProfile(profile_id, select);
    }, 200);
}

暂时工作正常，但我再也无法明确定义延迟的时间，因为加载部分取决于服务器。

我想检查是否有任何方法可以使用/实现我想要

要加载的所有必要资源以及已完成（getCountry()，getInterest()，getABCDEFG()以及其他一些资源......）
只调用getProfile()函数？

Answer 1

您可以在不应显示的部件上显示一些装载器。

如果调用是否挂起，则创建一个boolean var来隐藏/显示加载器。

如果您想在加载视图之前加载一些内容，可以查看ui-router and its resolve properties。

您还可以在函数中返回$ http调用，以便您可以按照自己的方式处理它。（以链接为例）。

//Get country lists
$scope.getCountry = function(){
    return $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    });
};

//Get profile 
$scope.getProfile = function(profile_id, select){
     var formatJSON = {
            profile_id: profile_id,
            select: select,
        };
    var json = JSON.stringify(formatJSON);
    var urlsafe = exEncrypt(json);
    return ProfileService.profileActions.query({payload:urlsafe}).$promise  
};

//Initialize update sequence
$scope.initUpdate = function(profile_id, select){
    $scope.getCountry().success(function(data) {
        $scope.countries = data;
        $scope.getProfile(profile_id, select).then(function(datas){
           $scope.uProfile = datas[0];
           document.querySelector('title').innerHTML = $scope.uProfile.username;
        });
    }).error(function(data) {
        console.log(data);
    });
}

这应该有效，但如果你明白了，你可以根据自己的想法和用途进行调整。

希望它有所帮助，如果你有任何问题（特别是关于ui-router）可以随意提问。

编辑：

请注意，通常$ http调用不会设置到控制器中，而是设置为服务。

以下是解析的状态（来自ui-router）定义的例子：

$stateProvider
  .state('mystate', {
    url: "myroute"
    templateUrl: 'template.html',
    controller: "mystateController",
    resolve : {
        countries : function($http){
                           return $http({
                           method  : 'GET',
                           url     : cdnLinks('country'),
                        });
                    }
    }
  })

您可以将解析参数注入控制器：

app.controller('mystateController', function(countries) {
  //Here goes your countries.
  console.log(countries);
});

Answer 2

您可以使用promises（https://docs.angularjs.org/api/ng/service/ $ q）来执行此操作。将$ q依赖项添加到您的控制器，然后，我们在getCountry（）＆amp; initUpdate（）。

它会在继续之前等待getCountry（）请求完成。此外，如果要添加其他请求，可以使用$ q.all（）等待多个请求在显示配置文件之前完成。

$scope.initUpdate = function(profile_id, select){
    $scope.getCountry().then(
        function(){
            $scope.getProfile(profile_id, select);
        }
    );
}

$scope.getCountry = function(){
    var deferred = $q.defer();
    $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    }).success(function(data) {
        $scope.countries = data;
        deferred.resolve();
    }).error(function(data) {
        console.log(data);
        deferred.reject();
    });

    return deferred.promise;
};

（注意：您可以通过直接返回$ http promise来改进代码）

Angularjs个人流程执行

2 个答案: