Header Ads Widget

Ticker

6/recent/ticker-posts

Promesas de Angular 10 HttpClient y JavaScript por ejemplo

En este tutorial, aprenderemos sobre las promesas de JavaScript / TypeScript y veremos cómo usarlas por ejemplo con Angular 10 y HttpClient.

¿Qué es una promesa de JavaScript / TypeScript?

Una promesa es un objeto JavaScript / TypeScript que puede producir un valor en algún momento. Una promesa puede estar en uno de los 4 estados posibles: cumplida, rechazada, pendiente o resuelta.

Las promesas simplifican los cálculos diferidos y asincrónicos. Una promesa representa una operación que aún no se ha completado. Fuente

Una promesa puede ser:

  • cumplido - La acción relacionada con la promesa se realizó correctamente
  • rechazado : la acción relacionada con la promesa falló
  • pendiente : aún no se ha cumplido o rechazado
  • liquidado - Ha cumplido o rechazado

Este es un ejemplo de promesa en JavaScript simple:

var promise = new Promise((resolve, reject) => { 
    resolve("Promise Resolved"); 
}) 

promise.then((success) => { 
        console.log(success); 
    }) 
    .catch(function(error) => { 
        console.log(error); 
    }); 
// Output: Promise Resolved

Las promesas se pueden ejecutar llamando a los métodos then()catch().

El then()método toma dos funciones de devolución de llamada como parámetros y se invoca cuando una promesa se resuelve o se rechaza.

El catch()método toma una función de devolución de llamada y se invoca cuando se produce un error.

Promesas con TypeScript y Angular 10 por ejemplo

Veamos ahora cómo usar Promises en Angular 10 para trabajar con HTTP de forma asincrónica.

Regrese a la carpeta donde desea crear su proyecto. A continuación, abra una interfaz de línea de comandos y ejecute el siguiente comando:

$ ng new angular10promises --routing=false --style=css

Esto creará una nueva aplicación Angular 10 sin enrutamiento y CSS para formato de hojas de estilo.

Ahora abra el src/app/app.module.tsarchivo e impórtelo HttpClientModuley agréguelo dentro de la importsmatriz de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

A continuación, abra el src/app/app.component.tsarchivo y agregue el siguiente código para enviar una solicitud HTTP GET y procesar la respuesta usando una Promesa.

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "Angular 10 and Promises Example";

  API_KEY = "e40d07f00b094602953cc3bf8537477e";

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    console.log("Angular 10 Promises");
    this.fetchDataAsPromise()
      .then((data) => {
        console.log(JSON.stringify(data));
      })
      .catch((error) => {
        console.log("Promise rejected with " + JSON.stringify(error));
      });
  }

  fetchDataAsPromise() {
    return this.httpClient
    .get(
        `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`
      )
      .toPromise();
  }
}

Lo importamos HttpCliente inyectamos a través del constructor del componente y lo usamos para enviar la solicitud HTTP.

A continuación, llamamos al get()método para enviar la solicitud y al toPromise()método para convertir el RxJS Observable devuelto en una promesa.

  fetchDataAsPromise() {
    return this.httpClient
    .get(
        `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`
      )
      .toPromise();
  }

En el ngOnInit()método del ciclo de vida, enviamos la solicitud real llamando al then()método de la promesa de la siguiente manera:

    this.fetchDataAsPromise()
      .then((data) => {
        console.log(JSON.stringify(data));
      })
      .catch((error) => {
        console.log("Promise rejected with " + JSON.stringify(error));
      });

Si la promesa se resuelve correctamente, simplemente mostramos los datos en la consola y, en caso de error, mostramos el error.

Conclusión

Hemos visto cómo se usan las promesas de JavaScript / TypeScript con Angular 10 por ejemplo y cómo realizar operaciones asincrónicas como solicitudes HTTP en lugar de observables.

Publicar un comentario

0 Comentarios