javascript - Angular 异步调用

Question

我的 Angular 应用程序中发生了一个奇怪的问题，我认为 Angular 的异步性是原因，但我不确定如何解决它。

在 .run 上，我有以下内容:

app.run(function ($user, $soundcloud) {
    $user.set();
    $soundcloud.set();
});

然后是两个服务...

app.service('$user', ['$http',  function ($http) {    
    var currentUser;    
    this.set = function () {
        $http.get('/users/active/profile')
            .success(function (obj) {
                currentUser = obj;
            })
            .error(function () {
                console.log('ERR');
            })
    }    
    this.fetch = function () {
        return currentUser;
    }

}]);    
app.service('$soundcloud', ['$http', function ($http) {    
    var sc;    
    this.set = function () {
        $http.get('/users/active/services/soundcloud')
            .success(function (obj) {
                sc = obj;
            })
            .error(function () {
                console.log('Error fetching soundcloud feed')
            })
    }    
    this.fetch = function () {
        return sc;
    }    
}]);

<小时/>

我遇到的问题是，当我转到/profile 并重新加载页面时，从 $soundcloud.fetch() 返回的数据不可用，除非我将 $soundcloud.fetch() 包装在 中setTimeout() 函数显然并不理想，所以我想知道应该在哪里放置 $soundcloud.set() 以使该数据在页面加载时立即可用。

这是我目前的 Controller :

app.controller('profileController', ['$scope', '$user', '$soundcloud', function ($scope, $user, $soundcloud) {

    $scope.activeUser = $user.fetch();
    $scope.activeSoundcloud = $soundcloud.fetch();

    console.log($user.fetch());
    setTimeout(function () {
        console.log($soundcloud.fetch());
    },100);
}]);

如果我在 setTimeout 之外使用 $soundcloud.fetch() ，那么我会得到 undefined 结果。应该在哪里调用 $soundcloud.set/fetch 才能使两组数据(用户和 soundcloud)立即可用？

Answer 1

<强> PLUNKER DEMO

解决此问题的一种方法是获取所有必要的数据，然后手动引导应用程序。

为此，请创建 bootstrapper.js。您可以访问内置的 Angular 服务，而无需通过 angular.injector(['ng']).invoke() 引导模块，该模块接受具有可注入(inject)依赖项的函数。 urlMap 变量只是一个键值存储，用于存储设置及其各自的 url。您通过 angular.forEach() 循环此 urlMap，然后一一获取所有设置，并将每个设置与每个设置一起存储在 settings 变量中其各自的键。将每个 $http Promise 请求存储在 promises 数组中，以便使用 $q.all() 解析它。当所有 promise 都得到解决后，调用 bootstrap() 函数，该函数在 app.settings 模块中添加一个 Settings 值，然后手动引导应用程序。

bootstrapper.js

angular.injector(['ng']).invoke(function($http, $q) {

  var urlMap = {
    $user: '/users/active/profile',
    $soundcloud: '/users/active/services/soundcloud'
  };

  var settings = {};

  var promises = [];

  var appConfig = angular.module('app.settings', []);

  angular.forEach(urlMap, function(url, key) {
    promises.push($http.get(url).success(function(data) {
      settings[key] = data;
    }));
  });

  $q.all(promises).then(function() {
    bootstrap(settings);
  }).catch(function() {
    bootstrap();
  });

  function bootstrap(settings) {
    appConfig.value('Settings', settings);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['app', 'app.settings']);
    });
  }

});

app.js

angular.module('app', [])

  .run(function(Settings) {
    if(Settings === null) {
      // go to login page or
      // a page that will display an
      // error if any of the requested
      // settings failed
    }
  })

  .controller('ProfileController', function($scope, Settings) {
    console.log(Settings);
  });