Comment faire un appel synchrone $http avec AngularJS

Question

Désolé pour ma question de débutant, mais la documentation d'angularjs n'est pas très explicite ou étendue pour quelqu'un qui comprend les trucs de base.

Existe-t-il un moyen de faire un appel synchrone avec angularjs ?

SUR UN SERVICE :

myService.getByID = function (id) {
    var retval = null;

    $http({
        url: "/CO/api/products/" + id,
        method: "GET"
    }).success(function (data, status, headers, config) {

        retval = data.Data;

    });

    return retval;
}

Answer 1

Pas actuellement. Si vous regarder le code source (ligne 56 actuellement), vous verrez que l'appel à XHR open est en fait codé en dur pour être asynchrone (le troisième paramètre est vrai) :

 xhr.open(method, url, true);

Vous devriez écrire votre propre service pour effectuer des appels synchrones. En général, ce n'est pas quelque chose que vous souhaitez faire en raison de la nature de l'exécution de JavaScript : vous finirez par bloquer tout le reste.

... mais... si le blocage de tout le reste est réellement souhaité, peut-être devriez-vous vous pencher sur les promesses et les $q service . Il vous permet d'attendre qu'un ensemble d'actions asynchrones soient effectuées, puis d'exécuter quelque chose une fois qu'elles sont toutes terminées. Je ne sais pas quel est votre cas d'utilisation, mais cela pourrait valoir le coup d'œil.

En dehors de cela, si vous avez l'intention de créer votre propre site, vous trouverez plus d'informations sur la façon de faire des appels ajax synchrones et asynchrones. peuvent être trouvés ici .

J'espère que cela vous aidera.

Answer 2

J'ai travaillé avec une usine intégrée avec google maps autocomplete et les promesses faites, j'espère que vous servir.

http://jsfiddle.net/the_pianist2/vL9nkfe3/1/

il suffit de remplacer le autocompleteService par cette requête avec $ http incuida se trouvant avant la factory.

app.factory('Autocomplete', function($q, $http) {

et $ http request avec

 var deferred = $q.defer();
 $http.get('urlExample').
success(function(data, status, headers, config) {
     deferred.resolve(data);
}).
error(function(data, status, headers, config) {
     deferred.reject(status);
});
 return deferred.promise;

<div ng-app="myApp">
  <div ng-controller="myController">
  <input type="text" ng-model="search"></input>
  <div class="bs-example">
     <table class="table" >
        <thead>
           <tr>
              <th>#</th>
              <th>Description</th>
           </tr>
        </thead>
        <tbody>
           <tr ng-repeat="direction in directions">
              <td>{{$index}}</td>
              <td>{{direction.description}}</td>
           </tr>
        </tbody>
     </table>
  </div>

'use strict';
 var app = angular.module('myApp', []);

  app.factory('Autocomplete', function($q) {
    var get = function(search) {
    var deferred = $q.defer();
    var autocompleteService = new google.maps.places.AutocompleteService();
    autocompleteService.getPlacePredictions({
        input: search,
        types: ['geocode'],
        componentRestrictions: {
            country: 'ES'
        }
    }, function(predictions, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            deferred.resolve(predictions);
        } else {
            deferred.reject(status);
        }
    });
    return deferred.promise;
};

return {
    get: get
};
});

app.controller('myController', function($scope, Autocomplete) {
$scope.$watch('search', function(newValue, oldValue) {
    var promesa = Autocomplete.get(newValue);
    promesa.then(function(value) {
        $scope.directions = value;
    }, function(reason) {
        $scope.error = reason;
    });
 });

});

la question elle-même doit être posée :

deferred.resolve(varResult) ;

quand vous avez bien fait et la demande :

deferred.reject(error) ;

lorsqu'il y a une erreur, et ensuite :

retourner la promesse différée ;