Un lector me preguntaba hace unos días… ¿que diferencias hay entre el servicio $http de AngularJS y el servicio Http de Angular 2? Voy a tratar de resolver la duda.

Diferencias entre los servicios http de AngularJS y Angular 2

La diferencia principal es que el $http de AngularJS devuelve Promises mientras que el Http de Angular 2 devuelve Observables. Sí, se que así a bote pronto esto te deja frío. Sigue leyendo, que ya entraremos en materia 😉

Observables vs Promises

Ahora te explico más en detalle que es esto de los observables, pero ya te adelanto 2 diferencias que convierten en claro ganador a la apuesta de Angular 2:

• Los observables se pueden cancelar, a diferencia de las promises
• Las promises solo pueden devolver una respuesta (a menos que combines varias promises con $q.all)

El primer punto es muy interesante y puede simplificarte la vida. Te pongo en situación: Imagina que estás navegando por un catálogo de productos. Seleccionas una categoría (se hace una petición GET a una API REST para obtener sus productos), pero te has equivocado de categoría así que vuelves atrás y seleccionas otra antes de que se haya llegado a resolver la primera llamada a la API.

AngularJS no tendría manera de parar la primera petición, así que tendrías que ensuciarte las manos para implementar un mecanismo que permitiera detectar esta situación y asegurarte que cuando recibes ambas peticiones del servidor, solo se cogen los productos de la petición que se corresponde con la vista final.

Los Observables se pueden cancelar, a diferencia de las Promises, lo que aporta una clara ventaja a Angular 2.

Con Angular 2, simplemente cancelarías la primera petición y no tendrías que preocuparte más del tema.

En otros aspectos, en cambio, tienen ciertas similaridades. Los callbacks de éxito/error de Promises se puede encadenar (encadenando las llamadas a then: .then(...).then(...)). Del mismo modo puedes encadenar callbacks de éxito/error de Observables ya que te puedes suscribir a un Observable tantas veces como quieras (con share y subscribe).

Pero… ¿qué son exactamente los famosos Observables?

Programación reactiva

Antes de nada, cabría destacar un cambio importante en la arquitectura de Angular 2 respecto a su predecesor: Angular 2 está orientado a la Programación Reactiva. Esto significa que está diseñando para reaccionar en base a la propagación de cambios de flujos de datos (eventos) asíncronos.

Para que se entienda más este punto, mientras que AngularJS se iba preguntando todo el rato si un objeto había cambiado, en Angular 2 es al revés: Hay objetos que cuando cambian, se lo notifican a aquellos que están interesados en detectar sus cambios (suscriptores). Este tipo de objetos, que se pueden «observar», se denominan Observables.

Mientras AngularJS comprobaba a cada ciclo si un objeto había cambiado, Angular2 se suscribe al objeto para ser notificado cuando éste cambie.

Concretamente, Angular utiliza la librería de flujos asíncronos RxJS en su versión 5 (todavía en beta), que ofrece varias utilidades para trabajar con Observables.

Observables

Para hacerlo simple, podríamos decir que un Observable es un objeto que guarda un valor y que emite un evento a todos sus suscriptores cada vez que ese valor se actualiza. En palabras de la RxJS, un Observable es un conjunto de valores a lo largo de cualquier intervalo de tiempo.

La librería RxJS te aporta además varias operadores para transformar los resultados de tus Observables, como el operador map (equivalente al método map de los arrays JS para manipular cada elemento del array), el operador debounce para ignorar eventos demasiado seguidos, el operador merge para combinar los eventos de 2 o más observables en uno…

La imagen siguiente presenta un observable que genera valores a lo largo del tiempo así como el resultado que obtienes al suscribirte teniendo en cuenta que el observable ha sido transformado con una función map para multiplicar sus valores por 10.

Si tienes interés, te recomiendo echarle un vistazo a la web de rxmarbles.com que dispone de unos diagramas interactivos muy intuitivos para describir cada uno de los operadores de Rx.

Usando la librería Http de Angular 2

Ahora que te he explicado las diferencias a nivel conceptual, vamos a ensuciarnos un poco las manos con código para ver como usar esta nueva versión.

Inyectando el servicio

Para poder utilizar el servicio Http antes que nada tienes que importarlo en el componente o servicio donde lo quieres usar, desde el paquete @angular/http, y pasarlo por DI.

Veamos un ejemplo:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class MyComponent {
  constructor(private http: Http) { }
}

Es importante destacar que el servicio Http no pertenece al núcleo de Angular, por lo que hay que importar también su módulo HttpModule y pasarlo en la fase de bootstrap (Si estas usando Angular 2 desde Ionic 2, esta fase no te afecta, ya lo hace Ionic 2 por ti).

Sería algo del estilo de esto:

//main.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule{}

GET

Volvamos al ejemplo del catálogo de productos. Imagina que quieres hacer una petición a una API REST para obtener el listado de productos de un catálogo. El código podría tener esta forma:

//productsService.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ProductsService {
  constructor(private http: Http) { }
  public categoryId = 0;

  get products() {
    return http.get(`base_url/category/${categoryId}/products`)
      .map(response => response.json());
  }

}

Como puedes ver, en el getter de productos, estoy usando el método GET del servicio Http y le paso únicamente la URL. Además, ejecuto el método map sobre el Observable que me devuelve la llamada anterior, para coger los datos de la respuesta HTTP en formato JSON.

De este modo, el getter de productos acaba devolviendo un Observable que emite un objeto JSON con un Array de Productos.

Usando servicios que devuelven Observables

¿Por qué es interesante la aproximación que acabo de hacer con el método GET?
Ahora es mi servicio el que devuelve un Observable con los resultados extraídos de la respuesta de la API REST, así que en cualquier componente donde use mi servicio, podré suscribirme a las actualizaciones de la propiedad products.

Vamos a un ejemplo muy simple en el que mostramos un listado de productos con su precio:

//myApp.ts
import { ProductsService } from './productsService';

@Component({
  selector: 'my-app',
  template: `<div *ng-for="let product of products">{{product.name}} - {{product.price}}</div>`
})
export class App {
  constructor(productsService: ProductsService) {
    productsService.products
      .subscribe(
        products => this.products = products,
        error => console.error(`Error: ${error}`)
      );
  }
}

Esto es un ejemplo claro del uso del paradigma de programación reactiva que usa Angular 2:

• En Angular 1 para conseguir esto mismo usaría un $watch, para comprobar a cada ciclo si productsService.products ha cambiando.
• En Angular 2 en cambio, la estrategia es mucho más eficiente porque es la propiedad productsService.products la que al ser actualizada me avisa.

POST

Ahora ya tienes los conceptos básicos, pero voy a mostrarte como hacer una petición POST para completar la información.
Pongamos que en esta misma app, tienes la opción de subir opiniones de los productos.

Una versión muy básica de como podría subirse una opinión a través de una API REST sería enviando la puntuación y la opinión que tienes del producto en el body de la petición POST, en formato JSON (lo indicarás en los headers).

Sería algo así:

//productsService.ts
import { Headers, RequestOptions } from '@angular/http';
//...more imports...

@Injectable()
export class ProductsService {
  constructor(private http: Http) { }
  //..previous stuff...


  sendOpinion(rating:number, description:string, productId:number){

    //build header options
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    //build POST body
    let body = JSON.stringify({rating, description});

    //send data to server
    this.http
       .post(`base_url/category/products/${productId}`, body, options)
       .map(response => response.json())
       .subscribe(
           data => console.log('Success uploading the opinion ', data),
           error => console.error(`Error: ${error}`
       );
  }
}

En este último ejemplo puedes ver como creo un objeto de tipo Headers, donde indico que los datos que se van a enviar serán de tipo JSON (aquí se podría pasar otra información como un token de autentificación, por ejemplo), y encapsulo los headers dentro de un objeto RequestOptions.

Creo también el contenido de la petición y se lo asigno a la variable body utilizando la abreviatura de propiedades que proporciona ES6.

Finalmente, utilizo http.post pasándo los parámetros anteriores y me suscribo al observable que devuelve para que realmente se ejecute la petición.

Conclusiones

El nuevo servicio Http de Angular 2 es mucho más potente que su predecesor gracias al uso de Observables.

Si vienes de AngularJS, quizá se te hace un poco extraño y cuesta arriba esto de los Observables, pero te aseguro que vale la pena invertir unos minutos de tu tiempo en aprender a usarlos.

Dime… ¿ya te han entrado ganas de empezar a usar Observables?