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

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

现在，如果你看到我有两个功能，这使保证通话和获取数据。这很好，但问题在于，当调用需要时间时，页面上显示的数据会出现延迟。继续前进如何在解析函数中包含多个调用，因为我无法继续添加函数。有人能告诉我如何改变这种解决方式吗？我需要页面加载信息我无法改变，但如何解决这个多个函数。对不起，但我不得不精确的在我的问题:)

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与其他承诺库区别开来的一个方面是它的$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（））将一个本地var设置为承诺，您可以让它们返回承诺。然后在init方法中，可以使用Promise.all（）。then（）来并行运行promise。

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