Header Ads Widget

Ticker

6/recent/ticker-posts

Angular 10 observables con pipe y promesa por ejemplo

 Los observables son parte de la biblioteca RxJS que Angular 10, y las versiones anteriores, utilizan para manejar operaciones asincrónicas como solicitudes http.

En este artículo, aprenderemos:

  • que es un observable,
  • observables frente a promesas,
  • cómo convertir un observable en una promesa,
  • cómo suscribirse, darse de baja y resolver observables directamente en plantillas angulares,
  • cómo utilizar el método de tubería de un observable con ejemplos de mapas y filtros.

Nota : Si bien en este artículo nos centramos en los observables en el contexto de Angular 10 y sus versiones anteriores, en realidad se puede usar con cualquier biblioteca o marco de JavaScript / TypeScript o incluso sin ningún marco.

Los observables se implementan en la biblioteca RxJS y simplemente puede importar la biblioteca para comenzar a trabajar con observables en su código TypeScript.

Para Angular 10 y versiones anteriores, RxJS se importa de forma predeterminada.

¿Qué es un observable angular?

Comencemos por comprender un observable angular.

Puede pensar en un observable como una colección de datos en el futuro, es decir, es posible que los datos no estén disponibles en el momento en que se crea el observable.

Piense en una solicitud http de Angular, se envía en algún momento pero la respuesta llega en otro momento. la aplicación no se cuelga y espera la respuesta en su lugar si continúa funcionando y cuando se recibe la respuesta comienza a procesarla.

Gracias a los observables, la aplicación Angular observa la respuesta y responde en consecuencia cuando se recibe.

Angular hace un gran uso de observables para sus API, como el módulo http y formularios.

Esto se llama programación asincrónica.

Observables angulares frente a promesas, ¿qué diferencias?

Por lo general, en JavaScript y TypeScript, la programación asincrónica se logra mediante devoluciones de llamada y promesas, siendo las promesas el enfoque moderno, entonces, ¿cuál es la diferencia entre una promesa y un observable?

Como se definió anteriormente, los observables son flujos de datos, lo que significa que puede ejecutar el código de procesamiento o el observador varias veces para los datos observados, pero por una promesa, el thenmétodo se ejecuta solo una vez. Puede usar tanto observables como promesas en Angular 10 y cualquier versión anterior del marco.

Cuando se suscribe a un observable en Angular 10, el código en el cuerpo del subscribemétodo se ejecuta cada vez que se recibe un nuevo valor hasta que cancela la suscripción del observable usando el unsubscribemétodo.

¿Cómo convertir un observable en una promesa en angular?

Puede convertir un observable en una promesa utilizando el .toPromise()método del observable. Por ejemplo, este es un servicio Angular que busca música en Apple iTunes usando Angular HttpClient y promete:

@Injectable()
export class MyService {
  apiServer: string = 'https://itunes.apple.com/search';
  constructor(private httpClient: HttpClient) {

  }

  search(q: string) {
    let promise = new Promise((resolve, reject) => {
      let apiURL = `${this.apiServer}?term=${q}&media=music&limit=20`;
      this.httpClient.get(apiURL)
          .toPromise()
          .then(
              res => { // Success

                console.log(res.json().results);
                resolve();
              },
              msg => { // Error
                reject(msg);
              }
          );
    });
    return promise;
  }
}

Dado que el getmétodo de HttpClientdevuelve un observable, usamos el toPromise()método para convertir lo observable en una promesa.

Dado que puede convertir un observable en una promesa, puede hacer uso de la async/awaitsintaxis en su código Angular.

Cómo suscribirse a observables en plantillas angulares

Angular proporciona la asynctubería que puede usar para suscribirse a observables y promesas directamente en las plantillas de sus componentes sin la necesidad de llamar al subscribe()método en el código de los componentes. Por ejemplo:

<div *ngIf="sendHttpRequest$ | async as data">

</div>

El sendHttpRequest$observable enviará una solicitud http gracias a Angular AsyncPipey emitirá nuevos datos, que serán manejados por Angular JSON pipe y los insertará en el DOM.

Nos suscribimos al sendHttpRequest$observable a través de Angular AsyncPipe, que también se encarga de cancelar la suscripción cuando el componente se destruye.

Utilice el método de tubería de un

Los observables angulares proporcionan un pipe()método que puede utilizar para combinar múltiples observables u operadores, como mapa y filtro. Los operadores se utilizan para transformar los datos observables de acuerdo con algunos criterios. Este es un ejemplo del uso del pipe()método en Angular:

returnNumbersObservable(): Observable<number> {
   return of(1, 2, 3, 4, 5, 6);
}
transformNumbers() {
  returnNumbersObservable().pipe(
    filter(n => n % 2 === 0),
    map(n => n * 2)
  )
  .subscribe(result => console.log(result));
} 

La salida será 4, 8, 12.

En nuestro código usamos los operadores filter()map()en el pipe()método del observable para transformar el flujo de números.

Los operadores filter()map()se ejecutarán en el orden en que se agregan en el pipe()método Observable En el Observabledevuelto por returnNumbersObservable()filterse ejecutará el operador y en el Observabledevuelto por filter(), el map()operador se ejecutará y el resultado final devuelto por pipe()será el resultado devuelto por el último operador, es decir, mapen nuestro ejemplo.

Conclusión

En este artículo, aprendimos sobre observables angulares por ejemplo. Hemos visto qué es un observable, las diferencias entre observables y promesas, luego hemos visto cómo convertir un observable en una promesa, cómo suscribirse, cancelar la suscripción y resolver observables directamente en plantillas angulares y, finalmente, cómo usar el método de tubería de un observable con map()filter()ejemplos.

Publicar un comentario

0 Comentarios