Método then() en Angular

1. Usa el método then() en Angular
2. la promise en Angular

Presentaremos el método then() y discutiremos las promesas en Angular.

Usa el método then() en Angular

El then() es un método de promise de Angular que se utiliza como segundo argumento. El método then() solo se ejecuta cuando se rechaza la promise.

Para entender el método then() en detalle, primero tenemos que aprender sobre las promesas en Angular.

la promise en Angular

Cuando las aplicaciones eran más simples, las funciones de devolución de llamada se invocaban de inmediato, pero con el tiempo en que las aplicaciones se volvieron más complejas y ricas con JavaScript para los navegadores modernos, la devolución de llamada se convirtió en una molestia. Las funciones de devolución de llamada se vuelven más lentas y, a veces, se atascan al solicitar datos.

Como solución en ES6, se introdujeron promesas para resolver los problemas y simplificarlos. Son poderosas abstracciones para escribir mejor funciones asincrónicas y son fáciles de mantener.

Una promise es una abstracción de la API que se utiliza principalmente para gestionar de forma síncrona operaciones asíncronas.

Usando el siguiente comando, vamos a crear una nueva aplicación.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos a nuestro directorio de aplicaciones.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

A continuación, creamos una promise que devolverá un valor después de 1 segundo de tiempo de espera. Primero, importaremos HttpClientModule y lo agregaremos a la matriz de importaciones de AppModule en app.module.ts, como se muestra a continuación.

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

Luego, comenzamos a inyectar el HttpClient dentro de app.component.ts y creamos un constructor y definimos nuestra URL de 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){}
}

Una vez que hemos inyectado HttpClient, definimos un fetchJson() y lo llamamos desde ngOnInit(), para que se inicialice cada vez que se carga la aplicación. Como se muestra a continuación, nuestro código en app.component.ts tendrá un código adicional.

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

Enviaremos una solicitud GET HTTP utilizando el método get() para devolver el observable. Lo convertiremos en una promise usando toPromise(), y usaremos el método 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));
    });
  }

Producción:

A partir del resultado anterior, se resolvió la promise y también devolvió los datos utilizando el método then() que prometió obtener. Podemos usar el método then() con una promesa como segundo argumento.