Header Ads Widget

Ticker

6/recent/ticker-posts

Código reactivo / asíncrono de JavaScript con RxJS 6, TypeScript y Angular 10: devoluciones de llamada, promesas y observables

 A lo largo de este tutorial, se le presentará el código reactivo y asincrónico de JavaScript, los flujos de datos y RxJS 6 que se usa en TypeScript y Angular.

Aprenderá que la programación reactiva en JavaScript y TypeScript se trata de codificar con flujos de datos asincrónicos y que RxJS es la implementación de JavaScript más popular que implementa Observables y el patrón de observador.

RxJS se incluye de forma predeterminada en Angular 2+, que se basa en TypeScript en lugar de JavaScript simple.

Aprenderá sobre los operadores RxJS, los métodos que se utilizan para componer Observables y trabajar en sus flujos de datos.

A continuación, aprenderá que Angular 10/9 usa RxJS v6 para trabajar con operaciones asincrónicas y API (en lugar de devoluciones de llamada y promesas de TypeScript) en muchos de sus módulos de uso común, como HttpClient, Router y Reactive Forms.

Extensiones reactivas para JavaScript con Angular 10

Aprenderemos a usar la biblioteca RxJS 6 con Angular 10/9 y TypeScript. Aprenderemos sobre:

  • Cómo importar la clase Observable y los otros operadores en TypeScript.
  • Cómo suscribirse y darse de baja de Observables.
  • Cómo importar y llamar operadores y encadenarlos con la pipe()función en TypeScript.
  • También veremos cómo usar la tubería asíncrona para suscribirse a Observables desde plantillas de Angular 10.
  • Por último vamos a ver cómo utilizar algunos operadores pipeable populares, tales como tap()map()filter()así como sus nuevas rutas de importación en RxJS 6.

Nota : Este tutorial funciona tanto con Angular 10 como con las versiones anteriores de Angular.

Este tutorial se divide en dos partes. Puede consultar el segundo tutorial desde este enlace .

Comenzaremos a ver qué son la programación reactiva, las operaciones asincrónicas y los flujos de datos y cómo se relacionan con la biblioteca RxJS. Luego veremos el concepto de un RxJS Observablecon ejemplos, los diversos tipos de Observables como:

A continuación, vamos a ver lo que los operadores son RxJS y ejemplos de algunos operadores populares, tales como tap()map()filter()share(), etc, y, finalmente, vamos a ver cómo angular 10 y mecanografiado utiliza el RxJS observable a hacer la programación asíncrona.

¿Qué es la programación reactiva en JavaScript / TypeScript?

¿Qué es la programación reactiva?

Veamos la definición de programación reactiva de diferentes fuentes.

Así lo define Andre Staltz, el creador de cycle.js (un marco JavaScript funcional y reactivo para código predecible):

La programación reactiva es la programación con flujos de datos asíncronos 

Esto significa que cuando escribe código que se ocupa de operaciones asincrónicas y flujos de datos, está haciendo programación reactiva.

Ahora, esta es la definición de Wikipedia que es más detallada:

En informática, la programación reactiva es un paradigma de programación declarativa que se ocupa de los flujos de datos y la propagación del cambio.

Esto significa que la programación reactiva es un estilo de programación declarativo (frente a un procedimiento) que funciona en flujos de datos.

Para obtener una guía detallada sobre programación reactiva y flujos de datos, consulte: La introducción a la programación reactiva que se ha perdido .

¿Qué es una secuencia en la programación reactiva de JavaScript?

Una secuencia es un concepto esencial en la programación reactiva, por lo que vale la pena ver la definición antes de continuar.

Que es una corriente

En todas las definiciones hemos visto la palabra flujo.

Entonces, ¿qué es una corriente?

Simplemente pon:

Una secuencia se refiere a valores de datos en el tiempo.

Veremos más adelante que Observables y streams son conceptos muy relacionados.

Presentación de la biblioteca RxJS (extensiones reactivas para JavaScript)

Ahora que hemos visto los conceptos de programación reactiva y flujos de datos, veamos qué es la biblioteca JavaScript RxJS.

Que es RxJS

RxJS es una biblioteca popular entre los desarrolladores web. Proporciona patrones de programación funcionales y reactivos para trabajar con eventos y flujos de datos y se ha integrado en muchas bibliotecas y marcos de desarrollo web como TypeScript y Angular.

RxJS facilita a los desarrolladores de JavaScript la escritura de código asincrónico utilizando Observables componibles en lugar de devoluciones de llamada y promesas.

RxJS son las siglas de Reactive Extensions for JavaScript y en realidad tiene implementaciones en otros lenguajes de programación como Java, Python, Ruby y PHP, etc. Se puede usar en TypeScript y también está disponible para plataformas como Android. Consulte la lista completa de idiomas y plataformas compatibles .

RxJS v6 es actualmente la versión estable de RxJS y tiene muchos cambios importantes con RxJS v5. Puede consultar más información sobre los cambios y cómo migrar desde la versión anterior en esta guía oficial de migración .

RxJS 6 tiene muchas ventajas sobre las versiones anteriores de RxJS 5, tales como:

  • El tamaño del paquete de la biblioteca es más pequeño,
  • El rendimiento de la última versión es mejor,
  • RxJS 6 Observable sigue la propuesta de especificaciones observables ,
  • La última versión proporciona una mejor debugabilidad,
  • Una mejor arquitectura modular,
  • Es compatible con versiones anteriores.

¿Cómo instalar y usar extensiones reactivas para la biblioteca de JavaScript?

RxJS es una biblioteca de JavaScript, lo que significa que puede instalarla de la misma manera que instala otras bibliotecas.

Usando extensiones reactivas para JavaScript usando ES6 a través de npm

En su proyecto, puede ejecutar el siguiente comando para instalar RxJS:

$ npm install rxjs

Luego puede importar los símbolos que desea usar desde el rxjspaquete o un subpaquete como rxjs/operators:

import { Observable, Subscriber } from 'rxjs';
import { tap, map, filter } from 'rxjs/operators';

Importamos el ObservableSubscribersímbolos de rxjsy la tapmapfilterlos operadores de rxjs/operators.

Más adelante veremos qué son estos símbolos y cómo usarlos en su aplicación Angular 10.

Uso de extensiones reactivas para JavaScript desde una CDN

También puede usar RxJS desde un CDN usando a <script>en su documento HTML:

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

Nota : tenga en cuenta que en Angular 10/9, RxJS 6 ya está incluido en su proyecto, por lo que no necesita instalarlo manualmente.

¿Qué es un Observable, Observer y Subsription en RxJS?

RxJS usa el concepto de Observables para manejar y trabajar con código asincrónico y basado en eventos.

La palabra asincrónica proviene de Asynchrony. En programación de computadoras, aquí está la definición de asincronía de Wikipedia :

La asincronía, en la programación de computadoras, se refiere a la ocurrencia de eventos independientes del flujo principal del programa y las formas de lidiar con tales eventos. Estos pueden ser eventos "externos", como la llegada de señales, o acciones instigadas por un programa que tienen lugar al mismo tiempo que la ejecución del programa, sin que el programa se bloquee para esperar resultados.

Después de leer esta definición, es posible que haya concluido que la asincronía es importante para las computadoras y la programación.

¡Hagamos esto simple!

El código asincrónico es el inverso del código síncrono , que es la forma original de pensar en su código cuando se le presenta por primera vez a la programación.

Su código JavaScript es síncrono cuando se ejecuta en secuencias, es decir, instrucción por instrucción en el orden en que aparecen en el código fuente.

Ejemplo de código síncrono TypeScript / JavaScript

Por ejemplo, consideremos este sencillo código JavaScript:

const foo = "foo" //1
const bar = "bar" //2
const foobar = foo  +  bar //3
console.log(foobar) //4

El navegador ejecutará este código síncrono línea por línea desde la línea 1 a la 4 comenzando asignando las variables foobar, concateándolas y mostrando la foobarvariable en la consola.

Nota: Si su código está creado en TypeScript, debe compilarse en JavaScript antes de que los navegadores web puedan ejecutarlo.

JavaScript y TypeScript son compatibles con la forma asincrónica.

JavaScript y TypeScript también admiten el enfoque asincrónico de escribir código, lo cual tiene sentido, ya que necesita responder a los eventos del usuario en el navegador, pero en realidad no sabe cuándo el usuario interactúa con su aplicación (y en qué orden) cuando está escribir código.

Esto se logró originalmente mediante devoluciones de llamada que debe definir en su código JavaScript y TypeScript y especificar cuándo se llamarán.

Por ejemplo, se mostrará el siguiente código asincrónico de JavaScript. ¡ Usted hizo clic en el botón! cuando el usuario hace clic en el botón identificado por el mybuttonidentificador:

document.getElementById('mybutton').addEventListener('click', () => {
  console.log("You clicked the button!")
})

El segundo argumento del addEventListener()método es la devolución de llamada.

Manejo de código asincrónico en JavaScript y TypeScript mediante devoluciones de llamada

También puede usar devoluciones de llamada para manejar operaciones asincrónicas en JavaScript y TypeScript que no involucran al DOM. Por ejemplo, el siguiente código se puede utilizar para enviar una solicitud HTTP POST a un servidor web:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('POST', 'your.server.com')
xhr.send()

Así es como realizas las famosas llamadas Ajax en JavaScript.

En realidad, el Ajax en sí significa un sincrónica J avascript un nd X ML.

Nota : Enviar solicitudes HTTP (que es una operación común en aplicaciones web) es una operación asincrónica por naturaleza, ya que la solicitud tardará en llegar al servidor, que luego enviará una respuesta a su aplicación cliente. Mientras tanto, la aplicación necesita responder a otras acciones y realizar otras tareas y solo procesar la respuesta del servidor cuando se recibe.

Si alguna vez ha trabajado extensamente con devoluciones de llamada, notará un problema con ellas. ¡Son difíciles de rastrear!

Cuando escribe aplicaciones complejas, generalmente termina escribiendo devoluciones de llamada anidadas (devoluciones de llamada dentro de devoluciones de llamada) con múltiples niveles de anidación. Esto es lo que se conoce como el infierno de la devolución de llamada .

Uso de promesas y sintaxis Async / Await para manejar código asincrónico JavaScript / TypeScript

JavaScript y TypeScript modernos introdujeron otros enfoques o abstracciones para lidiar con operaciones asincrónicas (sin usar demasiadas devoluciones de llamada) como Promises y Async / Await .

Se han introducido promesas en ES6 (JS 2015).

Async / await se introdujo en ES8 (JS 2017) y en realidad es un azúcar sintáctico además de Promises que ayuda a los desarrolladores a escribir código asincrónico con Promises de una manera que parece sincrónica.

Vea cómo usar la sintaxis async / await en TypeScript

Pero las promesas son en realidad similares a las devoluciones de llamada y tienen el mismo problema de anidamiento en cierto grado.

Uso de Observables para manejar JavaScript y código asincrónico de TypeScript

Dado que los desarrolladores siempre están buscando mejores soluciones, ahora tenemos Observables que utilizan el patrón de software del observador .

El patrón de observador es un patrón de diseño de software en el que un objeto, llamado sujeto, mantiene una lista de sus dependientes, llamados observadores, y les notifica automáticamente de cualquier cambio de estado, generalmente llamando a uno de sus métodos. Patrón de observador .

Los observables se implementan en el proyecto ReactiveX que tiene implementaciones en varios idiomas. RxJS es la implementación de JavaScript que también se puede usar con TypeScript.

Nota : Los Observables se implementan en muchas otras bibliotecas, como zen-observable y xstream, pero RxJS Observables son los más populares en JavaScript.

Los observables aún no son una característica incorporada de JavaScript, pero existe una propuesta para agregarlos en EcmaScript.

Vea cómo convertir una promesa de TypeScript en un sujeto o observable RxJS

Operadores RxJS

RxJS proporciona la implementación del concepto Observable, pero también una variedad de operadores que le permiten componer Observables.

Los operadores ofrecen una forma declarativa de realizar operaciones asincrónicas complejas con Observables.

Un operador trabaja en una fuente Observable observando sus valores emitidos y aplicando la transformación deseada en ellos, luego devuelve un nuevo Observable con los valores modificados.

Hay muchos operadores RxJS como:

  • tap(),
  • map(),
  • filter(),
  • concat(),
  • share(),
  • retry(),
  • catchError(),
  • switchMap(),
  • flatMap()etc.

Tuberías RxJS: combinación de varios operadores

RxJS proporciona dos versiones de la pipe()función: una función independiente y un método en la Observableinterfaz.

Puede utilizar la pipe()función / método para combinar varios operadores. Por ejemplo:

import { filter, map } from 'rxjs/operators';
const squareOf2 = of(1, 2, 3, 4, 5,6)
  .pipe(
    filter(num => num % 2 === 0),
    map(num => num * num)
  );
squareOf2.subscribe( (num) => console.log(num));

El of()método creará y devolverá un Observable a partir de los 1, 2, 3, 4, 5,6números y el pipe()método aplicará los operadores filter()map()en cada valor emitido.

Usando el map()operador RxJS

El map()operador es similar al Array.map()método. Le permite mapear respuestas observables a otros valores. Por ejemplo:

import { Observable} from 'rxjs';
import { map } from 'rxjs/operators';
getItems(): Observable> {
  return this.aService.getItems().pipe(map(response => response.data));
}

El getItems()método devuelve un Observable. Estamos usando el map()operador para devolver la datapropiedad del objeto de respuesta.

El operador nos permite mapear la respuesta del flujo observable al datavalor.

Importamos el operador de canalización map()del rxjs/operatorspaquete y usamos el pipe()método (que toma un número variable de operadores de canalización) para envolver el operador.

Usando el filter()operador RxJS

El filter()operador es similar al Array.filter()método. Le permite filtrar el flujo observable y devuelve otro observable. Por ejemplo:

import { Observable} from 'rxjs';
import { filter } from 'rxjs/operators';

filter(): Observable<Array<any>> {

  return this.aService.getItems()
    .pipe(
      filter(response => response.code === 200));
}

Usamos el filter()operador para emitir una notificación a los observadores del flujo observable solo cuando el código de estado de la respuesta HTTP es 200.

Mira la segunda parte .

Conlusion

En este tutorial, se le presentó la programación reactiva, los flujos de datos y RxJS 6 tanto en JavaScript como en TypeScript.

Ha aprendido que la programación reactiva se trata de codificar con flujos de datos asincrónicos y que RxJS es la implementación más popular que implementa Observables y el patrón de observador.

Aprendió sobre los operadores RxJS, que son métodos que se utilizan para componer Observables y trabajar en sus flujos de datos.

Finalmente, aprendió que TypeScript / Angular 10/9 usa RxJS v6 para trabajar con operaciones asincrónicas y API (en lugar de devoluciones de llamada y promesas) en muchos de sus módulos de uso común, como HttpClientRouterReactiveForms.

Publicar un comentario

0 Comentarios