Bagaimana untuk Memulakan Perkhidmatan AngularJS dengan Data Asynchronous?

AngularJS: Memulakan Perkhidmatan dengan Data Asynchronous

Suntikan kebergantungan awal boleh menimbulkan cabaran apabila berurusan dengan sumber data tak segerak. Untuk menangani isu ini, AngularJS menyediakan beberapa pendekatan untuk menyepadukan operasi tak segerak ke dalam perkhidmatan.

1. Menggunakan $routeProvider.when('/path',{ resolve:{...}

Kaedah ini mendedahkan janji dalam perkhidmatan, menjadikan promise approach lebih bersih. Sifat resolve dalam konfigurasi laluan memastikan bahawa kebergantungan diselesaikan sebelum pengawal dibuat seketika.

// 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 Pemintas

Pemintas HTTP membolehkan anda menyambung ke dalam proses permintaan/tindak balas HTTP dan melakukan operasi tak segerak sebelum atau selepas setiap permintaan Anda boleh menggunakan ini untuk memulakan perkhidmatan anda sebaik sahaja respons tersedia.

// 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. Menggunakan Janji dan $q

Janji boleh digunakan untuk mewakili operasi tak segerak dan menyelesaikan kebergantungan sebaik sahaja ia tersedia Perkhidmatan $q menyediakan kaedah untuk mencipta dan memanipulasi janji.

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

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

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

Dengan memanfaatkan teknik ini, anda boleh memulakan perkhidmatan dengan data tak segerak dalam AngularJS dengan berkesan. memastikan kebergantungan diselesaikan dengan betul sebelum instantiasi pengawal.

Atas ialah kandungan terperinci Bagaimana untuk Memulakan Perkhidmatan AngularJS dengan Data Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!