비동기 데이터로 AngularJS 서비스를 초기화하는 방법은 무엇입니까?

AngularJS: 비동기 데이터로 서비스 초기화

초기 종속성 주입은 비동기 데이터 소스를 처리할 때 문제를 일으킬 수 있습니다. 이 문제를 해결하기 위해 AngularJS는 비동기 작업을 서비스에 통합하기 위한 여러 가지 접근 방식을 제공합니다.

1. $routeProvider.when('/path',{ 해결:{...}

이 메서드를 사용하면 서비스 내에서 약속을 노출하여 약속 접근 방식을 더 깔끔하게 만듭니다. 경로 구성 내의 해결 속성은 다음을 보장합니다. 컨트롤러가 인스턴스화되기 전에 종속성이 해결됩니다.

// 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. 인터셉터

HTTP 인터셉터를 사용하면 HTTP 요청/응답 프로세스에 연결하고 각 요청 전후에 비동기 작업을 수행할 수 있습니다. 응답이 제공되면 이를 사용하여 서비스를 초기화할 수 있습니다.

// 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. Promise와 $q를 사용하면

Promise를 사용할 수 있습니다. $q 서비스는 Promise를 생성하고 조작하는 방법을 제공합니다.

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

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

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

이러한 기술을 활용하면 AngularJS에서 비동기 데이터로 서비스를 효과적으로 초기화할 수 있습니다. , 컨트롤러 인스턴스화 전에 종속성이 제대로 해결되었는지 확인합니다.

위 내용은 비동기 데이터로 AngularJS 서비스를 초기화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!