Diferencia entre then, observable y subscribe

Question

he visto algunos códigos donde se usan las funciones de then, observable, y subscribe. No estoy seguro pero creo que todas resultan haciendo lo mismo, quisiera saber con un ejemplo si es posible cual es la diferencia entre ellas o cuando utilizar cada una. Muchas gracias

Answer 1

Voy a intentar explicar los 3 conceptos:

Observable

Es una interfaz, prácticamente es la base de la programación reactiva. Puesto que angular hace un uso intenso de esta metodología, conviene conocer la librería RxJS.

Los objetos que implementan esta interfaz, son objetos que podemos observar (qué sorpresa, ¿verdad?).

¿Qué significa esto? Que te puedes subscribir a ellos y cada vez que ocurra algo, te lo harán saber.

Pongo un ejemplo:

//Nota: esta no es la forma óptima de importar la librería!
//las limitaciones de los fragmentos de SOes obligan a esto

//no funciona aquí, pero usando Webpack/Node, lo ideal sería algo como
//import { Observable, Subject, ReplaySubject, from, of, range,fromEvent } from 'rxjs';
//import { map, filter, switchMap } from 'rxjs/operators';

const { Observable, Subject, ReplaySubject, from, of, range,fromEvent } = rxjs;
const { map, filter, switchMap } = rxjs.operators;

let boton=document.getElementById('boton');
var clickObservable = fromEvent(boton, 'click');

let suscripcion = clickObservable.subscribe(()=> console.log('Clickado'));

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<button id="boton">click</button>

Nos hemos suscrito a un evento click en el botón: cada vez que ocurra algo se ejecutará la función que le hemos pasado en el método subscribe.

Observables en Angular (AJAX, principalmente)

Cuando usamos Angular, hacemos uso de Observables para hacer peticiones AJAX, de la siguiente manera:

class Servicio {

  constructor(private http: HttpClient) { }

  getRecurso(id :string) : Observable<Recurso>{
    return this.http.get<Recurso>(MI_URL + id);
  }
}

Aquí he definido un servicio que nos obtiene recursos por una id, devolviendo un Observable que provee recursos.

En nuestro componente, usaremos este servicio de la siguiente manera:

class Componente {

  private recurso: Recurso = null;

  constructor(private miServicio: Servicio) { }

  ngOnInit() {
    this.miServicio.getRecurso('un_identificador').subscribe(
      (re: Recurso) => {
        this.recurso=re;
      },
      (error) => {
        this.trataError(error);
      }
    );
  }
}

No usamos then porque ese método no está disponible, no existe en la clase observable. Su equivalente (o casi) es subscribe.

No quiero explicar toda la API de RxJS aquí, pero además de subscribe hay multitud de métodos aplicables a un Observable que pueden ser útiles: map, catch, from, of, toPromise (este puede ser interesante para los que no quieren usar más que promesas, pero desaprovecha mucho la potencia de los Observables) y muchos más.

.then

¡Este método no tiene nada que ver con Observables! Es un método de una clase que representa otro concepto: las promesas. De la clase Promise no explicaré nada porque gugadev ya lo dejó todo clarito en esta otra respuesta.

Sólo déjame enfatizar que

• si usamos Promise, usaremos .then(...).
• si usamos Observable usaremos .subscribe(...).