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

Question

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

$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 调用并获取数据。这很好，但问题在于调用需要时间时，页面上显示的数据会出现延迟。接下来如何在解析函数中包含多个调用，因为我无法继续在其中添加函数。有人能告诉我如何改变这种解决方式吗？我需要有关页面加载的信息，但我无法更改它，但如何在解析中处理这多个功能。很抱歉这个问题很长，但我必须准确回答我的问题:)

Answer 1

要在一个解析函数中执行所有三个数据提取，请使用$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);
}

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

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;
}]);

Answer 2

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

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