javascript - 如何使用需要异步初始化的提供者配置 Angular ？

Question

我有一个 serviceProvider 需要一些异步初始化。我希望我的 Controller 仅在初始化完成时访问此服务。

angular.module("myModule").provider("AsyncInit", {
    myThing: {},
    init: function(options) {
        doSomeAsyncStuff(options).success(function(newThing) {
            myThing = newThing;
        });
    },
    $get: function() {
        return {
            theThing: myThing
        }
    }
});

//Initialisation of myModule 
angular.module(myModule)
    .config(function(AsyncInitProvider) {
        AsyncInitProvider.init(options);
    })

如果我在 Controller 中访问 AsyncInit.theThing，它首先不会初始化，但稍后会初始化。这对我来说似乎合乎逻辑。

是否可以等到服务完全初始化？

Answer 1

如果你真的需要在你的提供者的配置过程中启动异步调用而不是你可以使用 $interval。

this.$get = function($q, $interval) {
  var deferred = $q.defer();
  var handler = $interval(function() {
    if (myThingHasBeenLoaded) {
      $interval.cancel(handler);
      deferred.resolve(myThingsValue);
    }
  }, 100);

  return {
    getMyThing: function() {
      return deferred.promise();
    }
  };
}

// In your controller:
myThingService.getMyThing().then(function(myThing) { console.log(myThing); } );

我用它来加载 Google Experiments API，效果很好。如果您的东西已成功加载，则间隔将检查所有 100 毫秒，然后解决 promise 。这里明显的问题是它只每 100 毫秒解析一次，不管你的东西是否在 1 毫秒内加载。 如果您不必在配置步骤中进行异步调用，我强烈建议只使用简单的 promise :

angular.module("myModule").provider("AsyncInit", function () {

  this.options = {};

  this.init = function(options) {
    this.options = options;
  };

  this.$get = function($q) {
    var deferred = $q.defer();
    var self = this;
    return {
      getMyThing: function() {
        doSomeAsyncStuff(self.options)
          .success(function(newThing) {
            deferred.resolve(newThing);
          })
          .failure(function(errors) {
            deferred.reject(errors);
          });

        return deferred.promise();  
      }
    };
  };
});

Controller 中的代码与上面的示例相同。