introducción a un api rest con angular

Cómo trabajar una api rest con angular

Jonathan Bartlett

archivado en: JavaScript / 2 febrero, 2015 / taller:

Aviso preliminar: para seguir esta entrada es necesario tener ciertas nociones de rest, como las que puedes leer en esta otra entrada.

Desarrollar una api rest con angular es bastante sencillo. Lo cuento un poco por encima, que ya es tarde y estos días voy volado. Me interesa sobre todo en que os fijéis en la manera en que podemos estructurar el tinglado, antes que en la sintaxis concreta.

Funciona con un sistema de promesas muy similar a las llamadas ajax de jQuery y la sintaxis larga de la petición (request) sería algo así:

var miRequest = {

method: 'GET', // Verbo REST

url: '/url que pedimos', // URL

headers: { // Cabeceras

'Content-Type': 'application/json'

},

data: {

"foo": "bar"

}

};

$http(miRequest).success(function() {

}).error(function() {

});

Sin embargo, lo normal es que nos baste con los métodos abreviados:

$http.get('/url que pedimos').

success(function(data, status, headers, config) {

// Hacemos algo cuando sale bien...

}).

error(function(data, status, headers, config) {

// hacemos algo cuando sale mal...

});

Tenemos tantos métodos como verbos rest y algún añadido para tratar con jasonakos:

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

Aunque se pueden lanzar las peticiones directamente desde el controlador, es mucho más limpio que desarrollemos un servicio, una factoría o similar, que sirva de punto de entrada y salida. Así, por ejemplo, para tirar de los servicios rest de http://restcountries.eu/, podríamos montar una factoría de este tipo:

angular.module('demoRest')

.factory('countriesRest', function($http) {

urlBase = "http://restcountries.eu/rest/v1/";

return {

// Vamos añadiendo los métodos que necesitemos

getCountries: function() {

return $http.get(urlBase + 'all', {objeto con datos});

}

}

});

Y luego la inyectamos en los controladores que tiren del servicio...

angular.module('demoRest')

.controller('MainController', function($scope, $log, countriesRest) {

countriesRest.getCountries()

.success(function(data, status, headers, config) {

$log.log('success', data);

}).error(function(data, status, headers, config) {

$log.log('error', data);

});

});

Hasta aquí no tiene más misterio, pero no está tan bien documentado, al menos en español, una funcionalidad muy útil: los interceptores.

En los métodos abreviados, podemos redefinir las cabeceras, ya sea en general (common) o para un verbo en concreto (patch, post y put) indicándolo en algún lugar antes de lanzar la petición;

 $http.defaults.headers.common['X-Auth-Token'] = "foo";

return $http.get(urlBase+'config.php', {"foo":"bars"});

Pero si van a ser cambios generales que afecten a la petición antes y después de ser lanzada y la respuesta en los mismos dos casos, nos puede resultar más útiles usar interceptores que, como indica su nombre, actúan en algún momento del proceso.

Los definimos en una factoría:

angular.module('mainApp')

.factory('basicHttpInterceptor', function($q, $log) {

return {

'request': function(config) {

// Hacemos algo con los datos de configuración de la petición

config.headers['X-Auth-Token'] = "bar";

return config;

},

'requestError': function(rejection) {

// Hacemos algo con los errores de la petición

return $q.reject(rejection);

},

'response': function(response) {

// Hacemos algo con la respuesta

return response;

},

'responseError': function(rejection) {

//Hacemos algo con el error en la respuesta

return $q.reject(rejection);

}

};

});

Y luego los inyectamos en un config de la aplicación

angular.module('mainApp', [])

.config(['$httpProvider', function($httpProvider) {

$httpProvider.interceptors.push('basicHttpInterceptor');

}]);

Otro día más, por hoy lo dejo aquí.

|| Tags: , , , ,

valoración de los lectores sobre introducción a un api rest con angular

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.