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

Question

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

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

Answer 1

您没有充分发挥承诺的潜力。如果不是让你的两个加载数据的函数（getToolboxes() 和 getFamilyData()）为承诺设置一个本地变量，你可以让它们 return 承诺。然后在您的 init 方法中，您可以使用 Promise.all().then().

并行承诺运行

看看 google 提供的关于 promises 的文档，它确实帮助我了解了如何充分利用 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;
}]);

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

How to handle multiple resource calls on ngRoute view load in angular js

javascript

angularjs

angular-promise

ngroute

angularjs-ng-route