Angular Observable VS. Promise

1. Was ist Promise in Angular
2. Was ist Observable in Angular
3. Hauptunterschiede zwischen Promise und Observable in Angular

Angular ist ein Framework zum Erstellen von Webanwendungen. Angular hat zwei Haupttypen der Datenverwaltung: observables und promises.

Observables- und Promises-Implementierungen erleichtern uns den Umgang mit asynchronen Programmen, und sie verwenden separate APIs und haben leicht unterschiedliche Motive.

In diesem Artikel wird erklärt, was Observable und Promise in Angular ist. Darüber hinaus erklären wir den grundlegenden Unterschied zwischen Observable und Promise.

Was ist Promise in Angular

Promises sind ein JavaScript-Konstrukt, das eine Möglichkeit bietet, asynchrone Vorgänge zu handhaben. Sie stellen ein Endergebnis einer asynchronen Operation dar und können einen von drei Zuständen haben: ausstehend, erfüllt oder abgelehnt.

Promises können auch miteinander verkettet werden, um eine Reihe abhängiger asynchroner Operationen darzustellen.

Darüber hinaus ist ein Promise ein Objekttyp, der in der Zukunft einen einzelnen Wert erzeugen kann, entweder einen aufgelösten Wert oder einen Grund, warum er nicht aufgelöst werden kann, oder er kann ausstehend sein.

Wenn Sie immer noch ratlos sind, wenden Sie dies auf eine reale Situation an. Wenn Sie einem Freund ein Versprechen geben, müssen Sie das Versprechen entweder erfüllen oder ablehnen; Dennoch gibt es Zeiten, in denen Sie in der Mitte gefangen sind und versuchen, das Versprechen zu erfüllen, es aber nicht schaffen.

In ähnlicher Weise kann auch ein Promise in der Programmierung nach demselben Verfahren arbeiten.

Zu den Nachteilen von Promise gehören:

1. Ein fehlgeschlagener Anruf konnte nicht wiederholt werden.
2. Zusagen werden schwieriger zu handhaben, wenn unsere Anwendung wächst.
3. Der Benutzer konnte eine Anfrage an die API nicht stornieren.

Was ist Observable in Angular

Was genau sind Observables in Angular? Es kann mit einem Versprechen in seiner grundlegendsten Form verglichen werden und hat im Laufe der Zeit einen einzigen Wert.

Observables hingegen sind wesentlich mehr als das. Angular Observables sind leistungsfähiger als Promises, da sie viele Vorteile haben, wie z. B. eine bessere Leistung und ein einfacheres Debugging.

Ein Observable kann im Laufe der Zeit viele Werte liefern, ähnlich wie Streaming funktioniert, und es kann bei Fehlern schnell beendet oder neu versucht werden. Observables können auf verschiedene Weise gekoppelt werden, oder es könnte einen Wettbewerb geben, wer den ersten verwenden kann.

Die Observables-Bibliothek RxJS ist ein mächtiges Werkzeug. Darüber hinaus sind sie wie Event-Emitter, die im Laufe der Zeit unbegrenzte Werte ausgeben können.

Nachteile:

1. Sie müssen sich ein kompliziertes Gerüst von Beobachtbarem aneignen.
2. Es kann vorkommen, dass Sie Observables in unerwarteten Situationen verwenden.

Hauptunterschiede zwischen Promise und Observable in Angular

Lassen Sie uns einige der Unterschiede zwischen Promise und Observable besprechen.

Beispiel für Promise und Observable in Angular

Lassen Sie uns ein Beispiel besprechen, das uns hilft, das Konzept von Versprechen und Observable im Detail zu verstehen.

Schreibmaschinencode:

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

HTML Quelltext:

<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/>

Was zwischen einem Versprechen oder einem Observable ist einfach zu verwenden? Hier ist also eine einfache Antwort auf diese Frage.

Promises werden in Angular verwendet, um asynchrone Operationen aufzulösen, und Observables werden verwendet, wenn die Daten aus einer externen Quelle wie einer API stammen.

Promises können mit einem einzelnen Wert oder einem Array von Werten aufgelöst werden, und Observables geben im Laufe der Zeit einen oder mehrere Werte aus.

Bei der Verwaltung einer HTTP-Suche kann Promise also nur eine einzige Antwort auf dieselbe Anfrage verarbeiten. Wenn es jedoch zahlreiche Ergebnisse für dieselbe Anfrage gibt, müssen wir Observable verwenden.

Um die Live-Demonstration des Codes zu überprüfen, hier klicken.