Header Ads Widget

Ticker

6/recent/ticker-posts

JavaScript Async / Await con Angular 7/8 Observable y Ejemplo HTTP

 En este tutorial, aprenderemos sobre JavaScript / ES7 async y esperaremos palabras clave y veremos cómo puede usarlas para escribir un mejor código asincrónico en sus aplicaciones Angular 7/8 con un ejemplo de uso HttpClientpara enviar solicitudes HTTP y RxJS Observables.

Las palabras clave async y await son simplemente azúcar sintáctico sobre JavaScript Promises y lo convierten en un paso más hacia el uso de menos devoluciones de llamada en su código.

Según MDN :

Una asyncfunción puede contener una awaitexpresión que pausa la ejecución de la función asíncrona y espera la resolución de la Promesa pasada, y luego reanuda la asyncejecución de la función y se evalúa como el valor resuelto.

Recuerde, la awaitpalabra clave solo es válida dentro de asyncfunciones. Si lo usa fuera del asynccuerpo de una función, obtendrá un SyntaxError.

Una función que devuelve una Promesa se puede escribir usando la palabra clave asincrónica y usar la palabra clave await dentro del cuerpo para esperar la operación asincrónica que le permite escribir la asincrónica sincrónica.

No necesita proporcionar devoluciones de llamada o el then()método para ejecutar algún código después de que se realiza la operación asincrónica, ya que su código esperará hasta que finalice la operación antes de ejecutar las siguientes líneas similares al código síncrono.

Veamos un ejemplo simple de JavaScript antes de ver un ejemplo más real con Angular 8.

Tomemos como ejemplo esta promesa:

waitForOneSecond() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("I promise to return after one second!");
      }, 1000);
    });
  }

Podemos ejecutar el código dentro del cuerpo de la promesa usando el siguiente código:

promiseMethod(){
    waitForOneSecond().then((value) => console.log(value));
}

Las promesas se crearon para hacer menos uso de las devoluciones de llamada, pero él then()mismo usa una función de devolución de llamada. Esto está bien para este ejemplo simple, pero puede ser problemático y propenso a errores para grandes cantidades de código.

Veamos ahora cómo usar la sintaxis async / await para eliminar el uso de la devolución de llamada. Dado que el método waitForOneSecond () devuelve una promesa, se puede esperar usando la palabra clave await:

async asyncMethod() {
const value = await waitForOneSecond();
console.log(value);
}

Los valores que podemos obtener, cuando la promesa se resuelve o rechaza, de la devolución de llamada, pasados ​​al then()método, ahora se devuelven desde el método esperado.

Ejemplo con Angular 7/8 y HTTP

Ahora que tenemos el uso básico de la sintaxis async / await, veamos un ejemplo simple del mundo real usando TypeScript y Angular.

En el tutorial anterior de promesas de JavaScript , hemos visto un ejemplo que se utiliza HttpClientpara enviar una solicitud de API a un punto final JSON.

Hemos configurado HttClient en nuestro ejemplo en el IDE de Stackblitz en línea y hemos definido un método fetchData () que llama al get()método para obtener datos JSON. Este es nuestro componente:

import { Component, 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';
  apiUrl = 'https://www.techiediaries.com/api/data.json';

  constructor(private httpClient: HttpClient){}

  ngOnInit(){
    this.fetchData();
  }

  private fetchData(){
    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));
    });
  }
}

¿Cómo esperar un Observable?

Las API angulares como HttpClient hacen uso de RxJS Observables en lugar de promesas para manejar operaciones asincrónicas, entonces, ¿cómo podemos esperar un Observable ya que la sintaxis async / await está diseñada para promesas?

La interfaz RxJS Observable proporciona el toPromise()método que se puede utilizar para obtener una promesa del Observable.

Usando HttpClient con promesas usando toPromise

RxJS proporciona el operador toPromise () que convierte un Observable en una promesa para que pueda trabajar con los HttpClientmétodos usando promesas en lugar de Observables. Lo hemos visto anteriormente con un ejemplo:

  private fetchData(){
    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));
    });

Llamamos al get()método que devuelve un Observable pero gracias a toPromise()que obtenemos una promesa y llamamos al then()método para enviar la solicitud de API y proporcionar una devolución de llamada que muestra la fecha una vez que se obtiene.

HttpClient 'Observable vs Promise

Podemos usar Observables o Promises para trabajar con HttpCliento con cualquier otra API en Angular, pero ¿hay alguna diferencia, excepto el conjunto de características que viene con RxJS?

Cuando trabaje con un Observable, usaría el subscribe()método para obtener datos. Cuando te suscribes, la devolución de llamada que proporciones al subscribe()método se ejecutará una o varias veces cada vez que haya datos nuevos. Pero cuando convierte el Observable en una promesa, la devolución de llamada proporcionada al then()método no se ejecuta una vez más. Si no necesita observar una fuente para un flujo de datos que viene en diferentes puntos de tiempo, puede usar promesas en lugar de Observables que deben cancelarse o de lo contrario causarán pérdidas de memoria y comportamientos inesperados si no se manejan correctamente.

Usando HttpClient con async / await:

Al usar la sintaxis async / await, evita suscribirse y darse de baja de Observables, pero también la then()devolución de llamada de una promesa que le permite escribir un código mejor que parece sincrónico incluso cuando realiza operaciones asincrónicas.

Convirtamos el fetchData()de nuestro ejemplo anterior para usar la sintaxis async / await:

  private async fetchData(){
    const data = await this.httpClient.get(this.apiUrl).toPromise();
    console.log("Data: " + JSON.stringify(data)); 
  }

Vea el ejemplo de este enlace

Conclusión

En este tutorial, hemos aprendido sobre las palabras clave JavaScript async / await y hemos visto un ejemplo de Angular 7/8 de ejemplo que demuestra cómo usar HttpClient con promesas y async / await y cómo esperar un RxJS Observable.

Publicar un comentario

0 Comentarios