Header Ads Widget

Ticker

6/recent/ticker-posts

Tubería asincrónica angular 10 con ejemplos observables y prometedores

 En este ejemplo, aprenderemos cómo usar Async Pipe con observables y promesas en 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 Angular10AsyncPipeExample 

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 Angular10AsyncPipeExample
$ 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.

¿Qué es Async Pipe en Angular?

Async es una tubería angular que se utiliza para suscribirse y darse de baja automáticamente de un observable o promesa (invoca el thenmétodo) en las plantillas. Cuando se destruye el componente asociado, se da de baja automáticamente de los observables para reducir las pérdidas de memoria.

Async Pipe está disponible en Angular 10 y versiones anteriores del marco.

Ejemplo de tubería asíncrona de Angular 10 con Observable y Promise

Veamos ahora un ejemplo del uso de la tubería asíncrona con un observable y una promesa.

Abra el src/app/app.component.tsarchivo y agregue las siguientes importaciones:

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

A continuación, defina dos asyncPromiseasyncObservablelas variables de la siguiente manera:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  asyncPromise: Promise<string>;
  asyncObservable: Observable<string>;
  // [...]
}

asyncPromisees una promesa que debe devolver un valor de cadena y asyncObservablees un observable que debe devolver valores de cadena.

A continuación, definimos dos métodos para crear una promesa a partir de un valor de cadena y un observable a partir de un valor de cadena de la siguiente manera:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  asyncPromise: Promise<string>;
  asyncObservable: Observable<string>;

  // [...]

  makePromise(value: string): Promise<string> {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(value), 3000);
    })
  }

  makeObservable(value: string): Observable<string> {
    return of(value).pipe(delay(3000));
  }

}

Para la promesa, simplemente resolvemos con la cadena pasada como parámetro al método del componente después de que hayan pasado tres segundos usando el setTimeoutmétodo.

Para el observable, creamos un observable, que emite el valor de cadena pasado como parámetro al método del componente después de que hayan pasado tres segundos, utilizando los métodos ofdelay.

Por último, llamamos al makePromise()makeObservable()métodos y assing la promesa de regresar y observable a la asyncPromiseasyncObservablelas variables en el ngOnInitmétodo del ciclo de vida del componente de la siguiente manera:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  asyncPromise: Promise<string>;
  asyncObservable: Observable<string>;

  ngOnInit() {


    this.asyncPromise = this.makePromise('Async Promise');
    this.asyncObservable = this.makeObservable('Async Observable');
  }

  makePromise(value: string): Promise<string> {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(value), 3000);
    })
  }

  makeObservable(value: string): Observable<string> {
    return of(value).pipe(delay(3000));
  }

}

Ahora que tenemos la promesa y el observable listos, podemos usar la tubería asíncrona en la plantilla del componente y suscribirnos a ellos.

Abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<h1>
    Angular 10 Async Pipe with Observable and Promise Example
</h1>

<p>

</p>

<p>

</p>

La tubería asíncrona llamará al método then de la promesa y se suscribirá y cancelará la suscripción del observable automáticamente.

Este es el ejemplo en vivo de Stackblitz:

Conclusión

Hemos visto cómo usar la tubería asíncrona con promesas y observables en Angular 10 y versiones anteriores.

Publicar un comentario

0 Comentarios