Question

需要您帮助减少应用程序的加载时间。在我们的应用程序中，我们使用ngroute，在ng-route中我们有解析调用。一旦解析调用成功，我们就会进行其他函数调用。每个函数调用都是单独的资源调用，它获取数据。现在请检查以下代码

$routeProvider.when('/friends/search', {
    controller: 'FriendsSearchController',
    controllerAs: 'fsvm',
    templateUrl: 'friends/search/friends-search.html',
    resolve: {
        initFriendData: getFriendsList
    }
});

function init() {
    if(initFriendData) {
        if(initFriendData.success) {
            getToolBoxes();
            getFamilyData();
        }
    }
 }
 init();

 function getToolboxes() {
     var promise = friendLandingService.getUserInfo();
         promise.then(function (result) {
            _this.userData = result.data;
        }, function (error) {
            console.log(error);
        });
 }

 function getFamilyData() {
     var promise = friendLandingService.familyInfo();
         promise.then(function (result) {
            _this.familyData = result.data;
        }, function (error) {
            console.log(error);
        });
 }

现在，如果您看到我有两个函数可以进行promise调用并获取数据。这很好，但问题在于，当呼叫花费时间时，页面上显示的数据有延迟。向前看如何在resolve函数中包含多个调用，因为我无法继续在其中添加函数。有人能告诉我如何改变这种解决方式吗？我需要页面加载的信息我无法改变，但如何解决这个多功能。很抱歉这个问题很长，但我必须准确地回答我的问题：）

Answer 1

你没有充分利用这些承诺。如果不是将两个函数用于加载数据（getToolboxes（）和getFamilyData（））而是将本地var设置为promise，则可以让它们返回promise。然后在你的init方法中，你可以使用Promise.all（）。然后（）来并行运行promises。

看看谷歌提供的承诺文档，它确实帮助我弄清楚如何充分利用承诺。 https://developers.google.com/web/fundamentals/getting-started/primers/promises

Answer 2

要在一个解析函数中执行所有三个数据提取，请使用$q.all：

$routeProvider.when('/friends/search', {
    controller: 'FriendsSearchController',
    controllerAs: 'fsvm',
    templateUrl: 'friends/search/friends-search.html',
    resolve: {
        initData: ["$q", "friendLandingService" function($q,service) {
            return initDataPromise($q, service);
        })]
    }
});

function initDataPromise($q, service) {
    var promiseHash = {};
    promiseHash.friendData = service.getFriendInfo()
      .then(function(result) {
        return result.data;
    });
    promiseHash.familyData = service.getFamilyInfo()
      .then(function(result) {
        return result.data;
    });
    promiseHash.userInfo = service.getUserInfo()
      .then(function(result) {
        return result.data;
    });
    return $q.all(promiseHash);
}

在将视图呈现给DOM之前，initData对象将使用所有三个数据集解析。

将AngularJS $q Service与其他promise库区分开来的一个原因是它的$q.all方法适用于JavaScript对象哈希（关联数组）。

然后在控制器中：

app.controller("FriendsSearchController", ["initData", function(initData) {
    this.friendData = initData.friendData;
    this.familyData = initData.familyData;
    this.userInfo = initData.userInfo;
}]);

如何处理角度js中ngRoute视图加载的多个资源调用

2 个答案: