Ediciones ENI Editorial | líder en informática
Programación reactiva
Introducción
En JavaScript, a menudo sucede que la aplicación tiene que administrar un bloque de datos bastante grande. Para no bloquear la página web durante el procesamiento, Angular funciona de forma asincrónica. Se lanza una acción en paralelo con el resto de la aplicación y, cuando termina, el programa recupera la respuesta y actúa en consecuencia.
Los objetos comunes de JavaScript no permiten este tipo de ejercicio. Angular utiliza promesas y observables para abordar estos problemas. Si la aplicación espera una única respuesta, es una promesa: si quiere recibir un flujo de datos que cambia constantemente con el tiempo, es un observable.
Por analogía, cuando un cliente envía un correo electrónico de queja al servicio de atención al cliente de un operador telefónico, solo espera una respuesta: un correo electrónico de reembolso. Es una promesa. Cuando un editor de ENI quiere saber el progreso de una obra, quiere saber su estado hoy y los días siguientes y espera que la cantidad de caracteres aumente con el tiempo. Es un observable.
Promesa
Una promesa es un valor que el desarrollador aún no conoce. Solo puede tener tres estados: pendiente, recibido o en error. No se puede anular.
1. Instanciar una promesa
Una promesa tiene dos métodos importantes: resolve() y reject().
-
Resolve() ocurre cuando la acción tomada por la promesa ha salido bien.
-
Reject() ocurre cuando se ha producido un error al procesar la promesa.
miVariable = new Promise( (resolve, reject) => { } )
this.mensaje = new Promise((resolve, reject) => {
resolve('Promesa recibida');
reject(‘Un error se ha producido') ;
}; El componente propondrá un botón que llama a un método que creará una nueva promesa. Si todo va bien, se muestra el mensaje. Para simular el procesamiento asincrónico, la función setTimeout () se usa para retrasar la ejecución del método resolve().
ng generate component componentes/c16 La visualización de la representación se realiza de manera bastante simple, modificando el archivo app.component.html:
<!-- C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\
app.component.html -->
<app-c16></app-c16> Y el componente c16:
//C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\
components\c16\c16.component.ts
import { Component, OnInit } from...Observable
1. Generalidades
Un observable es, por definición, algo que uno desea observar. El objetivo es ver su condición a lo largo del tiempo y recopilar los cambios que experimentaría.
A diferencia de las promesas, los observables pueden cambiar un número infinito de veces su valor. Un observable puede ser observado y luego liberado, luego observado, mientras que una promesa no puede deshacerse. Los observables son un flujo de datos al que uno puede suscribirse. Todo el proceso está bien dividido en dos partes distintas: el observable y el observador que se suscribe a lo observable.
Podemos observar mil veces un observable, pero una vez mil promesas.
Observable es una clase de TypeScript ubicada en un paquete de la biblioteca rxjs. Esto permite utilizar los asincrónicos y los observables más fácilmente.
miVariable = new Observable(funcion () { } );
La función es una serie de eventos que emitirá el observable. Cada emisión se realiza utilizando el método next().
miObservable = new Observable(obs => {
obs.next(1);
obs.next(2) ;
obs.next(3) ;
}); Aquí, el observable emite el valor 1, luego 2, luego 3.
2. rxjs
La biblioteca rxjs ha simplificado enormemente el trabajo de los observables, observadores y asincrónicos en general....
HTTP: HyperText Transfer Protocol
Gran parte del trabajo de un desarrollador de Angular, y por lo tanto de front-end, es consultar las aplicaciones de otros desarrolladores de back-end. Estos desarrolladores han creado una API donde podemos recuperar, modificar y agregar datos utilizando el módulo HttpClient de Angular y las solicitudes HTTP tradicionales.
-
GET: recupera información.
-
POST: agrega un elemento.
-
PUT: modifica un elemento.
-
DELETE: suprime un elemento.
El módulo HttpClientModule, presente en el framework Angular desde la versión 4 de Angular, permite realizar consultas en API REST de manera sencilla.
La API agify le permite deducir la edad de una persona a partir de su nombre (https://agify.io), basándose en miles de datos recopilados. En su forma más básica, esta API solo necesita un parámetro: el primer nombre buscado.
Por ejemplo, https://api.agify.io/?name=julio&country_id=ES muestra la edad deducida del nombre Julio para España.
El módulo HttpClientModule tiene un servicio llamado HttpClient que se debe agregar como dependencia al servicio que hará la llamada a la API.
ng generate service services/c16
//C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\services\
c16.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class C16Service...Práctica
1. Enunciado
A partir de la aplicación PokemonManager desarrollada en los capítulos anteriores, usará la API de PokeApi: https://pokeapi.co
a. Generaciones
Modifique el componente generations.component.ts para que utilice el servicio pokemons.service.ts. Esto recupera, gracias a un método getGenerations(), la lista de generaciones de Pokémon de la dirección https://pokeapi.co/api/v2/generation/
Uso de una API para recuperar la lista de todas las generaciones
Para ir más lejos, al hacer clic en una generación se puede mostrar la lista de Pokémon de esa generación. Pero esto no se abordará en la corrección.
b. Pokémon
Siguiendo el mismo principio, modifique el componente pokemons.component.ts para mostrar información sobre los Pokémon.
En su uso más básico, una solicitud a https://pokeapi.co/api/v2/pokemon/ recupera la lista de los primeros 20 Pokémon y https://pokeapi.co/api/v2/pokemon/1, por ejemplo, devuelve el Pokémon con la identificación 1.
Usando la API y el servicio pokemons.service.ts, muestre los primeros 20 Pokémon en la página pokemons.component.html. Para eso tendrá que modificar el método getPokemons() del servicio pokemons.service.ts.
Uso de una API para recuperar una lista de Pokémon
Si quiere añadir más dificultad, también es posible mostrar el nombre del Pokémon en español, así como una descripción, extrayendo la información necesaria de la URL: https://pokeapi.co/api/v2/pokemon-species/
2. Corrección
a. Generaciones
Para poder recuperar los datos de la API PokeApi, y en particular el resultado en JSON de la llamda a la URL https://pokeapi.co/api/v2/generation/, es necesario modificar el servicio pokemons.service.ts.
De hecho, es este servicio el que hará la llamada a la API y proporcionará un observable que el componente generations.component.ts podrá usar.
Una dependencia en el constructor de pokemon.service.ts permite usar HttpClient para luego crear un método getGenerations () que devuelve un observable.
// C:\JavaScriptYAngular\Angular\PokemonManager\src\app\
services\pokemons.service.ts
constructor(private http: HttpClient) { }
getGenerations()...