angularjs - ng-href angular 5

llamada http síncrona en angularJS

Question

Tengo el siguiente escenario, necesito datos de una url particular. He escrito una función que toma el parámetro ''url''. Dentro de la función tengo el método $ http.get que hace una llamada a la url. Los datos deben ser devueltos a la función de llamada.

var getData = function (url) {
    var data = "";

    $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });
    return data;
}

El problema es el siguiente, $ http.get es asíncrono, antes de que se obtenga la respuesta, la función regresa. Por lo tanto, la función que llama obtiene los datos como una cadena vacía. ¿Cómo puedo forzar la función para que no regrese hasta que los datos se hayan recuperado de la URL?

Answer 1

Eche un vistazo a las promesas para superar tales problemas, porque se utilizan en todo el lugar, en el mundo angular.

Necesitas usar $q

var getData = function (url) {
    var data = "";
    var deferred = $q.defer();

    $http.get(url)
        .success( function(response, status, headers, config) {
             deferred.resolve(response);
        })
        .error(function(errResp) {
             deferred.reject({ message: "Really bad" });
        });
    return deferred.promise;
}

Aquí hay un buen artículo sobre promesas y $ q

ACTUALIZAR:

Para su información, el servicio $http sí mismo devuelve una promesa , por lo que $q no es necesariamente necesario en este escenario (y, por lo tanto, un anti-pattern ).

Pero no permita que esta sea la razón para omitir la lectura sobre $ q y las promesas.

Así que el código anterior es equivalente a lo siguiente:

var getData = function (url) {
    var data = "";
    return $http.get(url);
}

Answer 2

Puedes usar el método $ q.all () también para resolver este problema

var requestPromise = [];

var getData = function (url) {
    var data = "";

    var httpPromise = $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });

    requestPromise.push(httpPromise);
}

en la función de llamada

$q.all(requestPromise).then(function(data) {

    //this is entered only after http.get is successful
});

Asegúrese de inyectar $ q como una dependencia. Espero eso ayude

Answer 3

Tu función parece redundante. Solo usa $http.get(url) , ya que en realidad no estás haciendo nada más antes de usarlo de todos modos.

var url = ''foo/bar'';

$http
    .get(url)
    .success( function(response, status, headers, config) {
        $scope.data = response;
    })
    .error(function(errResp) {
        console.log("error fetching url");
    });

O si necesita acceder a la promesa más adelante, simplemente asigne la variable;

var promise = $http.get(url);

// some other code..

promise.then(function(data){
   //.. do something with data
});

Answer 4

Una forma típica de hacer lo que quieres es así:

var getData = function(url, callback) {
    $http.get(url).success(function(response) {
        callback && callback(response);
    });
};

Utilizado como

getData(''/endpoint'', function(data) {
    console.log(data);
});