http - example - Cómo $ $ Llamada síncrona con AngularJS

link href angular

Question

Perdón por mi pregunta de novato, pero la documentación de AngularJS no es muy explícita o extensa para descifrar algunas cosas básicas.

¿Hay alguna manera de hacer una llamada sincrónica con AngularJS?

EN UN SERVICIO:

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

¿Qué hay de envolver su llamada en un método Promise.all() es decir

Promise.all([$http.get(url).then(function(result){....}, function(error){....}])

De acuerdo con MDN

Promise.all espera por todos los cumplimientos (o el primer rechazo)

Answer 2

Aquí hay una forma en que puede hacerlo de forma asíncrona y administrar cosas como lo haría normalmente. Todo sigue siendo compartido. Obtiene una referencia al objeto que desea actualizar. Cada vez que actualiza eso en su servicio, se actualiza globalmente sin tener que mirar o devolver una promesa. Esto es realmente bueno porque puede actualizar el objeto subyacente desde el servicio sin tener que volver a enlazar. Usando Angular de la manera en que debe ser usado. Creo que probablemente sea una mala idea hacer $ http.get / post synchronous. Obtendrá un retraso notable en el guión.

app.factory(''AssessmentSettingsService'', [''$http'', function($http) {
    //assessment is what I want to keep updating
    var settings = { assessment: null };

    return {
        getSettings: function () {
             //return settings so I can keep updating assessment and the
             //reference to settings will stay in tact
             return settings;
        },
        updateAssessment: function () {
            $http.get(''/assessment/api/get/'' + scan.assessmentId).success(function(response) {
                //I don''t have to return a thing.  I just set the object.
                settings.assessment = response;
            });
        }
    };
}]);

    ...
        controller: [''$scope'', ''$http'', ''AssessmentSettingsService'', function ($scope, as) {
            $scope.settings = as.getSettings();
            //Look.  I can even update after I''ve already grabbed the object
            as.updateAssessment();

Y en algún lugar en una vista:

<h1>{{settings.assessment.title}}</h1>

Answer 3

Debido a que Sync XHR está en desuso, es mejor no confiar en eso. Si necesita realizar una solicitud POST de sincronización, puede usar los siguientes ayudantes dentro de un servicio para simular una publicación de formulario.

Funciona al crear un formulario con entradas ocultas que se publica en la URL especificada.

//Helper to create a hidden input
function createInput(name, value) {
  return angular
    .element(''<input/>'')
    .attr(''type'', ''hidden'')
    .attr(''name'', name)
    .val(value);
}

//Post data
function post(url, data, params) {

    //Ensure data and params are an object
    data = data || {};
    params = params || {};

    //Serialize params
    const serialized = $httpParamSerializer(params);
    const query = serialized ? `?${serialized}` : '''';

    //Create form
    const $form = angular
        .element(''<form/>'')
        .attr(''action'', `${url}${query}`)
        .attr(''enctype'', ''application/x-www-form-urlencoded'')
        .attr(''method'', ''post'');

    //Create hidden input data
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            const value = data[key];
            if (Array.isArray(value)) {
                for (const val of value) {
                    const $input = createInput(`${key}[]`, val);
                    $form.append($input);
                }
            }
            else {
                const $input = createInput(key, value);
                $form.append($input);
            }
        }
    }

    //Append form to body and submit
    angular.element(document).find(''body'').append($form);
    $form[0].submit();
    $form.remove();
}

Modifique según sea necesario para sus necesidades.

Answer 4

He trabajado con una fábrica integrada con autocompletar de Google Maps y promesas hechas, espero que sirvas.

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

solo necesita reemplazar el servicio de autocompletar por esta solicitud con $ http incuida antes de la fábrica.

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

y $ solicitud de http con

 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 pregunta en sí misma debe hacerse sobre:

deferred.resolve(varResult); 

cuando lo has hecho bien y la solicitud:

deferred.reject(error); 

cuando hay un error, y luego:

return deferred.promise;

Answer 5

No actualmente. Si observa el código fuente (a partir de este momento en octubre de 2012) , verá que la llamada a XHR abierta está realmente codificada para ser asíncrona (el tercer parámetro es verdadero):

 xhr.open(method, url, true);

Debería escribir su propio servicio que realiza llamadas sincrónicas. En general, eso no es algo que normalmente querrás hacer debido a la naturaleza de la ejecución de JavaScript que terminarás bloqueando todo lo demás.

... pero ... si se desea bloquear todo lo demás, tal vez deberías mirar las promesas y el servicio de $ q . Le permite esperar hasta que se realice un conjunto de acciones asincrónicas, y luego ejecutar algo una vez que estén completos. No sé cuál es tu caso de uso, pero podría valer la pena verlo.

Aparte de eso, si vas a hacer tu propia versión, aquí encontrarás más información sobre cómo hacer llamadas ajax sincrónicas y asíncronas.

Espero que sea de ayuda.

Answer 6

Recientemente me encontré con una situación en la que quería realizar llamadas de $ http provocadas por una recarga de página. La solución que fui con:

1. Encapsular las dos llamadas en funciones
2. Pase la segunda llamada de $ http como devolución de llamada a la segunda función
3. Llamar a la segunda función en apon .success

Answer 7

var EmployeeController = ["$scope", "EmployeeService",
        function ($scope, EmployeeService) {
            $scope.Employee = {};
            $scope.Save = function (Employee) {                
                if ($scope.EmployeeForm.$valid) {
                    EmployeeService
                        .Save(Employee)
                        .then(function (response) {
                            if (response.HasError) {
                                $scope.HasError = response.HasError;
                                $scope.ErrorMessage = response.ResponseMessage;
                            } else {

                            }
                        })
                        .catch(function (response) {

                        });
                }
            }
        }]


var EmployeeService = ["$http", "$q",
            function ($http, $q) {
                var self = this;

                self.Save = function (employee) {
                    var deferred = $q.defer();                
                    $http
                        .post("/api/EmployeeApi/Create", angular.toJson(employee))
                        .success(function (response, status, headers, config) {
                            deferred.resolve(response, status, headers, config);
                        })
                        .error(function (response, status, headers, config) {
                            deferred.reject(response, status, headers, config);
                        });

                    return deferred.promise;
                };