Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de Angular 10 Async Await

 En este ejemplo, aprenderemos cómo usar Async / Await con Angular 10 y versiones anteriores.

Como requisito previo, debe tener Angular CLI v10 instalado en su máquina de desarrollo.

También puede usar el IDE de Stackblitz en línea si aún no tiene un entorno de desarrollo listo.

Crear un nuevo proyecto de Angular 10

Comencemos con un nuevo proyecto. Vaya a una nueva interfaz de línea de comandos y ejecute el siguiente comando para crear un nuevo proyecto:

$ ng new Angular10AsyncAwait 

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, vaya a la carpeta de su proyecto y ejecute el servidor usando los siguientes comandos:

$ cd Angular10AsyncAwait
$ ng serve    

Utilice su navegador web y visite la http://localhost:4200/dirección para ver su aplicación en ejecución.

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

Async / Await por ejemplo

Veamos ahora cómo usar Async / Await con Angular 10 por ejemplo.

Dirígete al src/app/app.module.tsarchivo y agrega HttpClientModulela matriz de importaciones de la siguiente manera:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';

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

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

A continuación, abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:


import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { map, delay } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  private apiURL = "https://api.github.com/";
  public message: string = "Uninitialized";
  public response;

  constructor(private httpClient: HttpClient) {}

  async fetchData() {
    this.message = "Fetching..";
    this.response = "";
    this.response = await this.httpClient
      .get<any>(this.apiURL)
      .pipe(delay(1000))
      .toPromise();
    this.message = "Fetched";
  }
}

Primero importamos e inyectamos el HttpClientservicio a través del constructor del componente. A continuación, se definen tres variables apiURLmessageresponse.

A continuación, definimos el fetchData()método que envía la solicitud HTTP GET a la URL de la API para obtener datos. Dado que esta es una operación asincrónica, el HttpClient.get()método devuelve un observable RxJS, y necesitamos usar el toPromise()método para convertirlo en una Promesa, luego usamos la awaitpalabra clave para esperar a que la promesa se resuelva o falle. También definimos el fetchData()método como asíncrono usando la asyncpalabra clave para que podamos usar la awaitpalabra clave en el cuerpo del método.

Así es como usamos la async/awaitsintaxis con los métodos Angular HttpClient que devuelven observables RxJS en lugar de promesas.

Dado que la async/awaitsintaxis solo se puede usar con promesas, necesitamos convertir los observables en promesas usando el toPromise()método del observable.

A continuación, abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<div>
  Progress: 
</div>
<div>
  Response:
  <pre></pre>
</div>
<button (click)="fetchData()"> Get </button>

Simplemente usamos la interpolación de cadenas para mostrar el mensaje y las variables de respuesta. Usamos la tubería json para convertir el objeto JSON en una cadena. Y vinculamos el fetchData()método al clickevento del botón.

Finalmente, este es el ejemplo en vivo de Stackblitz:



Publicar un comentario

0 Comentarios