如何處理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