Angular then() Methode

1. Verwendung der then() Methode in Angular
2. Das promise in Angular

Wir stellen die then()-Methode vor und diskutieren promises in Angular.

Verwendung der then() Methode in Angular

Das then() ist eine Angular promise-Methode, die als zweites Argument verwendet wird. Die then()-Methode wird nur ausgeführt, wenn das promise abgelehnt wird.

Um die then()-Methode im Detail zu verstehen, müssen wir uns zuerst mit den promises in Angular vertraut machen.

Das promise in Angular

Als die Anwendungen einfacher waren, wurden die Callback-Funktionen sofort aufgerufen, aber mit der Zeit, als Anwendungen mit JavaScript für moderne Browser komplexer und reichhaltiger wurden, wurde Callback zu einem Problem. Rückruffunktionen werden langsamer und bleiben manchmal beim Anfordern von Daten hängen.

Als Lösung wurden in ES6 promises eingeführt, um die Probleme zu lösen und zu vereinfachen. Sie sind leistungsstarke Abstraktionen, um asynchrone Funktionen besser zu schreiben, und sie sind leicht zu warten.

Ein promise ist eine API-Abstraktion, die hauptsächlich verwendet wird, um asynchrone Operationen synchron abzuwickeln.

Erstellen wir mit dem folgenden Befehl eine neue Anwendung.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Als nächstes erstellen wir ein promise, das nach 1 Sekunde Wartezeit einen Wert zurückgibt. Zuerst importieren wir HttpClientModule und fügen es dem Import-Array von AppModule in app.module.ts hinzu, wie unten gezeigt.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

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

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Dann fangen wir an, den HttpClient in app.component.ts einzufügen, erstellen einen Konstruktor und definieren unsere API-URL.

# angular
import { Component, VERSION, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  constructor(private httpClient: HttpClient){}
}

Sobald wir HttpClient injiziert haben, definieren wir ein fetchJson() und rufen es von ngOnInit() auf, sodass es initialisiert wird, wenn die Anwendung geladen wird. Wie unten gezeigt, enthält unser Code in app.component.ts zusätzlichen Code.

# angular
ngOnInit(){
    this.fetchJson();
  }
  private fetchJson(){}

Wir senden eine GET HTTP-Anforderung mit der get()-Methode, um das Observable zurückzugeben. Wir werden es mit toPromise() in ein promise umwandeln und die Methode then() verwenden.

# angular
private fetchJson(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);
    promise.then((data)=>{
      console.log("Promise resolved with: " + JSON.stringify(data));
    }).catch((error)=>{
      console.log("Promise rejected with " + JSON.stringify(error));
    });
  }

Ausgabe:

Aus der obigen Ausgabe wurde das promise aufgelöst, und es wurden auch die Daten mit der then()-Methode zurückgegeben, die versprochen wurde. Wir können die Methode then() mit einem Promise als zweites Argument verwenden.