Méthode then() en Angular

1. Utilisez la méthode then() dans Angular
2. la promise dans Angular

Nous allons introduire la méthode then() et discuter des promise dans Angular.

Utilisez la méthode then() dans Angular

Le then() est une méthode de promise Angular utilisée comme deuxième argument. La méthode then() n’est exécutée que lorsque la promesse est rejetée.

Pour comprendre la méthode then() en détail, nous devons d’abord en apprendre davantage sur les promise dans Angular.

la promise dans Angular

Lorsque les applications étaient plus simples, les fonctions de rappel étaient appelées immédiatement, mais avec le temps où les applications devenaient complexes et s’enrichissaient de JavaScript pour les navigateurs modernes, le rappel devenait un problème. Les fonctions de rappel deviennent plus lentes et se bloquent parfois lors de la demande de données.

Comme solution dans ES6, des promesses ont été introduites pour résoudre les problèmes et les simplifier. Ce sont de puissantes abstractions pour mieux écrire des fonctions asynchrones et sont faciles à maintenir.

Une promise est une abstraction d’API principalement utilisée pour gérer de manière synchrone des opérations asynchrones.

En utilisant la commande suivante, créons une nouvelle application.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’applications.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Ensuite, nous créons une promise qui renverra une valeur après 1 seconde de temps d’attente. Tout d’abord, nous allons importer HttpClientModule et l’ajouter au tableau des importations de AppModule dans app.module.ts, comme indiqué ci-dessous.

# 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 { }

Ensuite, nous commençons à injecter le HttpClient dans app.component.ts et créons un constructeur et définissons notre URL d’API.

# 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){}
}

Une fois que nous avons injecté HttpClient, nous définissons un fetchJson() et l’appelons depuis ngOnInit(), afin qu’il soit initialisé chaque fois que l’application est chargée. Comme indiqué ci-dessous, notre code dans app.component.ts aura un code supplémentaire.

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

Nous enverrons une requête GET HTTP en utilisant la méthode get() pour retourner l’observable. Nous le convertirons en promise en utilisant toPromise(), et nous utiliserons la méthode then().

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

Production:

À partir de la sortie ci-dessus, la promise a été résolue et elle a également renvoyé les données à l’aide de la méthode then() qui a promis d’être récupérée. Nous pouvons utiliser la méthode then() avec une promesse comme deuxième argument.