Difference between then, observable and subscribe

I will try to explain the 3 concepts:

Observable

It's an interface, practically the basis of the reactive programming . Since angular makes an intensive use of this methodology, it is advisable to know the liba RxJS .

The objects that implement this interface are objects that we can observe (what a surprise, right?).

What does this mean? That you can subscribe to them and every time something happens , they will let you know.

I give an example:

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>

We have subscribed to an event by clicking on the button: every time something happens, the function that we have passed in the subscribe method will be executed.

Observable in Angular (AJAX, mainly)

When we use Angular, we use Observables to make AJAX requests, in the following way:

class Servicio {

  constructor(private http: HttpClient) { }

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

Here I have defined a service that obtains resources for an id, returning an Observable that provides resources.

In our component, we will use this service as follows:

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);
      }
    );
  }
}

We do not use then because that method is not available, it does not exist in the observable class. Its equivalent (or almost) is subscribe .

I do not want to explain the entire RxJS API here, but in addition to subcribe there are many methods applicable to a Observable that can be useful: map , catch , from , of , toPromise (this may be interesting for those who do not want to use more than promises, but the power of the Observables is greatly wasted) and many more.

.then

This method has nothing to do with Observables! It is a method of a class that represents another concept: the promises. Of the class Promise I will not explain anything because gugadev has already left everything clear in this other answer .

Just let me emphasize that

• if we use Promise , we will use .then(...) .
• if we use Observable we will use '.subscribe (...).