Angular Observable VS. Promise

1. ¿Qué es Promise en Angular?
2. ¿Qué es Observable en Angular?
3. Diferencias clave entre Promise y Observable en Angular

Angular es un framework para construir aplicaciones web. Angular tiene dos tipos principales de gestión de datos: observables y promises.

Las implementaciones de Observables y Promises nos facilitan el manejo de programas asincrónicos, y usan API separadas y tienen motivos ligeramente diferentes.

Este artículo explicará qué es Observable y Promise en Angular. Además, explicaremos la diferencia fundamental entre Observable y Promise.

¿Qué es Promise en Angular?

Las Promises son una construcción de JavaScript que proporciona una forma de manejar operaciones asincrónicas. Representan un resultado eventual de una operación asincrónica y pueden estar en uno de tres estados: pendiente, completado o rechazado.

Las promesas también se pueden encadenar para representar una serie de operaciones asincrónicas dependientes.

Además, una Promesa es un tipo de objeto que puede producir un solo valor en el futuro, ya sea un valor resuelto o una razón por la cual no se puede resolver o puede estar pendiente.

Si todavía estás perplejo, aplica esto a una situación de la vida real. Si le haces una promesa a un amigo, debes cumplir la Promesa o rechazarla; sin embargo, hay momentos en los que estás atrapado en el medio, intentando cumplir la Promesa pero fallando en hacerlo.

De manera similar, una Promesa en programación también puede funcionar con el mismo procedimiento.

Los inconvenientes de Promise incluyen:

1. No se pudo volver a intentar una llamada fallida.
2. Las promesas se vuelven más difíciles de administrar a medida que crece nuestra aplicación.
3. El usuario no pudo cancelar una solicitud a la API.

¿Qué es Observable en Angular?

¿Qué son exactamente los observables en Angular? Se puede comparar con una Promesa en su forma más básica y tiene un valor único a lo largo del tiempo.

Los Observables, por otro lado, son considerablemente más que eso. Los Observables Angular son más potentes que las promesas porque tienen muchas ventajas, como un mejor rendimiento y una depuración más sencilla.

Un Observable puede proporcionar muchos valores a lo largo del tiempo, de forma similar a cómo funciona la transmisión, y se puede finalizar rápidamente o volver a intentarlo si hay algún error. Los observables se pueden acoplar de varias maneras, o puede haber una competencia para ver quién puede usar el primero.

La biblioteca de Observables RxJS es una herramienta poderosa. Además, son como emisores de eventos que pueden emitir valores ilimitados a lo largo del tiempo.

Empate hacia atrás:

1. Tienes que adquirir un marco complicado de observable.
2. Puede encontrarse usando Observables en situaciones inesperadas.

Diferencias clave entre Promise y Observable en Angular

Analicemos algunas de las diferencias entre Promise y Observable.

Ejemplo de Promesa y Observable en Angular

Analicemos un ejemplo que nos ayude a comprender el concepto de promesa y observable en detalle.

Código TypeScript:

import { Component } from '@angular/core';
import { Observable, Observer, } from "rxjs";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    promiseTemp: Promise<boolean>;
  createPromise() {
    this.promiseTemp = this.testPromise(0);
  }
  observableTemp: Observable<boolean>;

  createObservable() {
    this.observableTemp = this.testObservable(0);
  }

  subscribeObservable() {
    this.observableTemp
      .subscribe(
        result => {
          console.log(`Observable Ok: ${result}`);
        },
        err => {
          console.error(err);
        });
  }
  observableNextTemp: Observable<boolean>;
  createObservableNext() {
    this.observableNextTemp = this.testObservableNext(0);
  }
  promiseTemp2: Promise<boolean>;
  createToPromiseByObservable() {
    this.promiseTemp2 = this.testObservable(0).toPromise();
  }
  observableForkJoinTemp: Observable<boolean[]>;
  countForkJoin = 2;

  testObservable(value: number): Observable<boolean> {
    console.log("create Observable");
    return Observable.create((observer: Observer<boolean>) => {
      console.log("execute Observable");
      this.testPromise2(value)
        .then(result => {
          observer.next(result);
          observer.complete();
        })
        .catch(err => {
          observer.error(err);
          observer.complete();
        });
    });
  }

  testObservableNext(value: number): Observable<boolean> {
    console.log("create Observable Next");
    return Observable.create((observer: Observer<boolean>) => {
      console.log("execute Observable Next");
      this.testPromise2(value)
        .then(result => {
          observer.next(result);

          setTimeout(() => {
            observer.next(result);
            observer.complete();
          }, 5000);

        })
        .catch(err => {
          observer.error(err)
        });
    });
  }

  testPromise(value: number): Promise<boolean> {
    console.log("creation");
    return new Promise((resolve, reject) => {
      console.log("execution");
      this.testPromise2(value)
        .then(result => {
          resolve(result);
        })
        .catch(reject);
    });
  }

  testPromise2(value: number): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (value > 1) {
        reject(new Error("testing"));
      } else {
        resolve(true);
      }
    });
  }
}

Código HTML:

<h2>Example of Promise and Observable </h2>

<br/>
<button (click)="createPromise()">Create Promise</button>
<br/>
<br/>
<button (click)="createObservable()">Create Observable</button>
<br/>
<br/>
<button (click)="subscribeObservable()">Subscribe Observable</button>
<br/>
<br/>
<button (click)="createObservableNext()">Create Observable Next</button>
<br/>
<br/>
<button (click)="createToPromiseByObservable()">Create Promise by Observable</button>
<br/>

¿Cuál es fácil de usar entre una promesa o un observable? Así que aquí hay una respuesta simple a esta pregunta.

Las promesas se usan en Angular para resolver operaciones asincrónicas y los Observables se usan cuando los datos provienen de una fuente externa como una API.

Las promesas se pueden resolver con un solo valor o un array de valores, y los Observables emiten uno o más valores a lo largo del tiempo.

Entonces, mientras administra una búsqueda HTTP, Promise solo puede manejar una sola respuesta para la misma solicitud; sin embargo, si hay numerosos resultados para la misma solicitud, debemos usar Observable.

Para ver la demostración en vivo del código, haga clic aquí.