Comment gérer correctement les réponses $http asynchrones dans les services AngularJS ?

Traitement de la réponse $http dans le service

Dans votre récent problème, vous avez rencontré un problème où votre vue n'était pas mise à jour après avoir traité avec succès un $ requête http dans votre service.

Solution :

Pour résoudre ce problème, vous devez travailler directement avec les promesses et leurs fonctions « puis » pour gérer les réponses renvoyées asynchrones. Voici un exemple :

app.factory('myService', function ($http) {
  var myService = {
    async: function () {
      // $http returns a promise
      var promise = $http.get('test.json').then(function (response) {
        // Process the response and return modified data
        return response.data;
      });
      // Return the promise
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function (myService, $scope) {
  // Call the async method and then do stuff with what is returned in the "then" function
  myService.async().then(function (data) {
    $scope.data = data;
  });
});

Dans cet exemple, la méthode asynchrone du service renvoie une promesse. Le contrôleur appelle cette méthode et gère la valeur résolue de la promesse à l'aide de la fonction « then ». Cela vous permet d'accéder et de manipuler les données de réponse et de mettre à jour la vue depuis le contrôleur.

Vous pouvez également mettre en cache la requête $http en utilisant la même technique :

app.factory('myService', function ($http) {
  var promise;
  var myService = {
    async: function () {
      // If the promise doesn't exist, create it
      if (!promise) {
        promise = $http.get('test.json').then(function (response) {
          // Process the response and return modified data
          return response.data;
        });
      }
      // Return the cached promise
      return promise;
    }
  };
  return myService;
});

Cette approche garantit que la requête $http n'est effectuée qu'une seule fois, améliorant ainsi les performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!