Material‎ > ‎Software‎ > ‎Angular 1.x con ES6‎ > ‎

Servicio $http (ES6)

Objetivo

Tenemos una aplicación web de naturaleza distribuida. Esto significa que tenemos componentes en el cliente y en el servidor. La consecuencia lógica es que
  • por un lado tenemos mayor control de lo que pasa en el cliente, y eso es bueno: bajamos la comunicación innecesaria con el servidor, podemos actualizar dinámicamente la vista, hacer validaciones, transformaciones locales, etc.
  • pero en una aplicación donde hay accesos concurrentes y donde la información debe estar centralizada, tenemos que ir hacia ese origen de datos remoto. Nos comunicamos con el server mediante servicios, que antes eran RPC sincrónicos, y hoy son servicios web, REST y preferentemente asincrónicos. 

El objeto $http

Es un servicio que viene incorporado con Angular, y que permite comunicarnos con servidores HTTP remotos, a través de pedidos asincrónicos que transmiten datos
Se inyecta en el constructor de cada service que necesite hacer una llamada remota.

Ejemplo

Vemos a continuación un service de Angular que hace dos llamadas al server en la aplicación de Tareas pendientes
  • en un método http GET lista las tareas (pendientes o todas, eso lo define el servicio REST en el server)
  • en un método http PUT actualiza la tarea (por ejemplo, para asignarla o indicar que está cumplida)
class TareaService {
    constructor($http) {
        this.$http = $http
    }

    findAll(callback, errorHandler) {
        this.$http.get('/tareas').then(callback, errorHandler)
    }

    update(tarea, callback, errorHandler) {
        this.$http.put('/tareas/' + tarea.id, tarea).then(callback, errorHandler)
    }

}
service/tarea.js

Luego asociamos la clase service con la aplicación angular de la siguiente manera

angular
    ...
    .service('tareaService', TareaService)
app.js

El lector puede apreciar cómo el objeto $http se inyecta como referencia en la función que define el comportamiento del service.
Cada llamada http necesita pasar dos callbacks mediante el mensaje then:
  • el primer parámetro es una función que indica lo que debe hacer cuando la operación se complete
  • el segundo parámetro es otra función que indica cómo debe comportarse el cliente en caso de error en el servidor (código distinto de 200 = OK)
En el callback se recibe la respuesta del server (objeto response), con el header y el contenido o data. Para llenar la lista de tareas el controller debe 

1. inyectar la dependencia en el constructor:

class TareasController {

  constructor(tareaService, $timeout) {
      this.tareaService = tareaService
      ...

2. Y luego invocar a los métodos definidos en el service

  getTareas() {
    this.tareaService.findAll((response) => {
      this.tareas = response.data
    }, () => {
    	notificarError(this)
    })
  }

Esta es una versión simplificada, para profundizar más recomendamos hacer el taller de servicios REST.

Links relacionados


Comments