Angular Logo

$Http & $q AngularJs

Es poco probable encontrar hoy dia una aplicación web hecha en cualquier framework que no realice alguna petición ajax, debido a esto y al gran uso de AngularJS este tutorial sera de estos 2 AngluarJS service $http y $q.

$http

Servicio que nos proporciona todo un set de metodos para realiza nuestras peticiones xhr de la forma es que mejor nos guste y cumpla con los requerimentos de nuestras apies.

Realizar un request con angular es tan facil como:

var config = {};
$http.get('http://localhost/api/test', config)
     .then(function(response){ console.log('request exitosa.') }, 
           function(response){ console.log('error'); });

Todos los metodos de $http retornan una promesa y en los metodos success y fail de la promesa, ahi deliberamos que hacer en cada escenario. Cada metodo recibe un objeto response que esta compuesto de esta maneja:

{
    data – {string|Object}
    status – {number} 
    headers – {function([headerName])} – función para obtener cada header por su nombre.
    config – {Object} – La configuración que usamos para realizar el request
    statusText – {string} – estatus en forma de texto de la respuesta.
}

Al igual que el metodo $http.get existen tambien un metodo para cada verbo

HTTP :

$http.get
$http.post
$http.delete
$http.head
$http.put

Cada request angular recibe un objeto con propiedades de configuración el cual puede tener estas opciones:

{
    'headers':{},
    'data':{},
}
  • Headers: Los headers que debe tener nuestro request, como Content-Type, Accept o cualquier header que requiera nuestro api.
  • Data: La data que vamos a enviar en el cuerpo de nuestro request.

Existe una forma generica de realizar un HTTP Request con angular y es usando el constructor del service $http de esta forma:

var config = {};

$http(config);

$http({
    url: 'http://localhost/api/',
    method: 'GET | POST | DELETE | PUT',
    data: {
        param: 'value1',
        param1: 'value2'
    }
    ...
});

Como podrán percatar recibe el mismo config con la excepción de que tenemos que colocar el method y la url

$q

Es el servicio que nos provee angular para trabajar con promesas, pensaran que si $http ya retorna una promesa por que usar $q para trabajar con otra promesa, bueno si nuestra aplicación tiene bien definido las responsabilidades de los componentes Controllers y Services no podemos estar tratando con HTTP Codes ni nada de esas cosas ya que no es la responsabilidad de los controllers sino de los Servicios.

var def = $q.defer();

$q nos brinda los metodos resolve y rejected y debemos de usarlos de acuerdo a el escenario que nos encontremos.

Pongamos un ejemplo que tenemos un servicio el cual tiene un metodo que realiza una peticion http.


angular.module('app')

.controller('Index', ['Recurso', function(Recurso){
        Recurso.request()
        .then(function(data){
            //trabajamos con nuestra data retornada aqui
        }, function(error){
           //error
        });
}])

.service('Recurso', ['$http', '$q', function($http, $q){
    var request = function(){
        var def = $q.defer();

        $http({})
        .then(function(response){
            def.resolve( response.data );
        }, function(response){
            def.reject( 'error' );
        });

        return def.promise;
    }

    return {
        request:request,
    }
}]);

Lo que normalmente se realiza y es una buena practica es realizar el http request en el servicio, instancia $q y retornar la promesa realizar el request y luego resolver la promesa que retornamos dentro de la promesa del servicio, podrá ser confuso pero cualquier duda, ahi esta el código, esto en parte se realizan cumpliendo el Principio de responsabilidad unica.

Referencias

$http
$q
S.O.L.I.D