Saltar al contenido

Usando HTTP con Observables RxJS

Ahora que todo está instalado en su sistema, vamos a saltar a un simple código de ejemplo.

Paso 1: Iniciar un nuevo proyecto

Dado que el Angular es un marco, necesitamos seguir algunos estándares del marco.

Usando HTTP con Observables RxJS
Usando HTTP con Observables RxJS

Vamos a crear un nuevo proyecto en RxJS; he llamado a mi proyecto como RxJS_observable .

1ng nuevo RxJS_observable

Shell

Paso 2: Crear nuestra primera aplicación angular 7 para el proceso asíncrono RxJS

Configuración del cliente Http

El primer paso es importar el HttpClientModule en src/app/app.module.ts.

123456789importar{HttpClientModule}de$0027@angular/common/http$0027;@NgModule({ declaraciones:[AppComponent],importa:[BrowserModule,HttpClientModule],bootstrap:[AppComponent]})exportclassAppModule{}

tipografía

A continuación, vamos a crear un modelo de clase. He nombrado el nombre de mi clase como país .

1ng generar clase país

Shell

Después de que se genere la clase, vamos a añadir algunos objetos:

12345exportclassCountry{ id:número; nombre:cadena; mayúscula:cadena;}

tipografía

Para las solicitudes, necesitamos llamar a la API para el archivo de servicio que necesitamos en Angular. He llamado al nombre de la clase apicall .

1ng generar servicio apicall

Shell

Después de haber generado apicall.service.ts, importa el cliente HTTP e inicializa en el constructor, como se muestra a continuación.

1import{HttpClient}de$0027@angular/common/http$0027;

tipografía

En Constructor:

1constructor(httpCliente privado:HttpCliente){}

tipografía

Importar RxJS en Servicios

En los servicios, debemos importar RxJS, como se indica a continuación, para los procesos asíncronos.

12import*asRxde "rxjs/Rx";import{from,Observable}de$0027rxjs$0027;

tipografía

Puedes usar el siguiente comando para correr por Angular.

1ng serve

Shell

Paso 3: Nuestras primeras peticiones para buscar el capital por nombre

Una aplicación que trabaja en un conjunto de solicitudes utilizando métodos de solicitud indica la acción que se desea realizar para un recurso determinado.

Para solicitar que se busquen las mayúsculas por nombre, siga los siguientes pasos de código:

apicall.service.ts

123456789101112131415161718192021222324252627282930import{Injectable}de$0027@angular/núcleo$0027;import{HttpCliente}de$0027@angular/común/http$0027; importar*comoRxde$0027rxjs/Rx$0027;importar{de,Observable, lanzarError }de$0027rxjs$0027;importar{mapa, atraparError }de$0027rxjs/operadores$0027;@Injectable({ providedIn: $0027root$0027})exportclassApicallService{constructor(private httpClient:HttpClient){}buscarPaísPorNombre(name:string):Observable<País[]³;{let headers_HttpHeaders=newHttpHeaders(); headers = cabeceras. append($0027Aceptar$0027,$0027aplicación/json$0027); headers = headers.append($0027X-RapidAPI-Key$0027,$00271108554cc1mshf11c17c4fea2b3dp179054jsn2446fb7a8965$0027);returnthis.httpClient.get(`https://restcountries-v1. p.rapidapi.com/capital/`+ nombre,{cabezas: cabeceras}).pipe(map((data:País[])=[;{devolución datos;}),catchError(error={[};{devolucióntirarError($0027¡Capital no encontrado!$0027);}))}

tipografía

En el código anterior, creamos el método searchCountryByName() para llamar a la API. Llamamos al método HTTP GET para obtener una lista de todos los datos en mayúsculas. Solicitamos la URL de la API, https://restcountries-v1.p.rapidapi.com/capital/name , al tiempo que pasamos nombre para obtener un mapa de respuesta a la clase Country utilizando la clave map . Devolverá una respuesta y un mapa al objeto. Si la mayúscula no se encuentra, entonces arrojará una excepción no encontrada, lo cual arrojará un error, ” Mayúscula no encontrada! “. En el encabezado añadimos la clave API y el tipo de contenido.

componente.de.la.aplicación

1234567891011121314151617exportclassAppComponent{constructor(público http:HttpClient,privado apiService:ApicallService){}ngOnInit(){} name:string;searchCapital(){esto. apiService.searchCountryByName(this.name).subscribe((data:Country[])={{{console.log(data);this.countries= data;});}}

tipografía

En el código anterior, creamos el método searchCapital(). Es un método de acción, que funciona con el botón de clic, y comienza a buscar las capitales por nombre. Aquí llamamos al método searchCountryByName() de ApiCallservice, que suscribe la clase de país para recoger los datos.

app.component.html

1234567891011121314151617181920<form;³³³;label;³³³[nombre]³[nombre]³[etiqueta]³]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³]"; /botón</formulario="tabla<tr&tqr="nombre</thqr="salario</thqr=;/tr&tqr=;tqr=;tqr*ngFor="dejar país de países"{{{país}. nombre}}</td;td;};{{{capital del país}}</td;};

html

En el código anterior, creamos el campo de texto (Input) donde introducimos un nombre en mayúsculas para buscar y creamos un botón de búsqueda donde llamamos al método searchCapital() que está presente en app.component.ts. La tabla está diseñada para mostrar la lista de datos encontrados.