Wie initialisiere ich AngularJS-Dienste mit asynchronen Daten?

AngularJS: Dienst mit asynchronen Daten initialisieren

Die anfängliche Abhängigkeitsinjektion kann beim Umgang mit asynchronen Datenquellen zu Herausforderungen führen. Um dieses Problem anzugehen, bietet AngularJS mehrere Ansätze zur Integration asynchroner Vorgänge in Dienste.

1. Mithilfe von $routeProvider.when('/path',{ lösen:{...}

Diese Methode macht ein Versprechen innerhalb des Dienstes verfügbar, wodurch der Versprechensansatz sauberer wird. Die Auflösungseigenschaft innerhalb der Routenkonfiguration stellt dies sicher dass Abhängigkeiten aufgelöst werden, bevor der Controller instanziiert wird.

// Service
app.service('MyService', function($http) {
  var myData = null;
  return {
    promise: $http.get('data.json'),
    ...
  }
);

// Route Config
app.config(function($routeProvider){
  $routeProvider
    .when('/', {
      ...
      resolve: {
        MyServiceData: ['MyService', function(MyService) {
          return MyService.promise;
        }]
      }
    })
  });

// Controller
app.controller('MainCtrl', function($scope, MyService) {
  $scope.data = MyService.doStuff();
  // ...
});

2. Verwendung von $http Interceptors

HTTP Mit Interceptoren können Sie sich in den HTTP-Anfrage-/Antwortprozess einbinden und vor oder nach jeder Anfrage asynchrone Vorgänge ausführen. Sie können dies verwenden, um Ihren Dienst zu initialisieren, sobald die Antwort verfügbar ist.

// Interceptor
app.factory('MyInterceptor', function ($q, $rootScope) {
  var serviceData = null;

  return {
    response: function(response) {
      if (response.config.url === 'data.json') {
        serviceData = response.data;
        $rootScope.$broadcast('serviceDataReady', serviceData);
      }
      return response;
   }
});

// Apply interceptor
app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('MyInterceptor');
}]);

// Service
app.service('MyService', function($rootScope) {
  $rootScope.$on('serviceDataReady', function(event, data) {
    myData = data;
  });
  
  // ...
});

3. Verwendung von Promises und $q

Promises können verwendet werden, um asynchrone Vorgänge darzustellen und Abhängigkeiten aufzulösen, sobald sie verfügbar sind. Der $q-Dienst stellt Methoden dafür bereit Versprechen erstellen und manipulieren.

app.service('MyService', function($http, $q) {
  var deferred = $q.defer();

  $http.get('data.json').then(function(response) {
    deferred.resolve(response);
  });

  // ...
  return {
    promise: deferred.promise,
    // ...
  };
});

Durch die Nutzung dieser Techniken können Sie Dienste effektiv mit asynchronen Daten in AngularJS initialisieren und so sicherstellen, dass Abhängigkeiten vor der Controller-Instanziierung ordnungsgemäß aufgelöst werden.

Das obige ist der detaillierte Inhalt vonWie initialisiere ich AngularJS-Dienste mit asynchronen Daten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!