Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de promesas de JavaScript con ejemplo angular 7/8

 En este tutorial diseñado para desarrolladores de Angular, aprenderá sobre las Promesas de JavaScript introducidas en ES6 y verá cómo puede usarlas con un ejemplo de Angular 7/8.

JavaScript se creó originalmente para agregar interactividad a las páginas web. Si ha escrito un código JavaScript serio antes, lo más probable es que esté familiarizado con el concepto de funciones de devolución de llamada que son muy comunes en JavaScript porque simplemente, son necesarias para manejar eventos asincrónicos cuando los usuarios interactúan con una página web.

Las funciones de devolución de llamada no se llaman inmediatamente, sino cuando se activan los eventos correspondientes. Al principio estuvo bien, pero cuando los desarrolladores comenzaron a crear aplicaciones complejas y ricas con JavaScript para navegadores modernos, las devoluciones de llamada se convirtieron en un problema y dieron como resultado lo que se conoce como el infierno de devolución de llamada que ocurre cuando las funciones de devolución de llamada están anidadas en otras devoluciones de llamada en uno o más niveles. .

Como solución al infierno de las devoluciones de llamada, ES6 introdujo Promises, que son simplemente una abstracción moderna y poderosa para escribir código asincrónico de una manera mejor y más fácil de mantener.

Desde Angular 2+, el código asincrónico se maneja principalmente con RxJS Observables que están profundamente integrados dentro de las API de Angular, pero las Promesas aún tienen su lugar ya que son parte del estándar moderno de JavaScript.

Veamos por ejemplo cómo usar Promesas en el ejemplo de Angular 8.

Como este es un ejemplo simple, no necesitamos crear un entorno de desarrollo y comenzar un proyecto Angular desde cero con Angular CLI, simplemente podemos usar Stackblitz, un IDE en línea para el desarrollo front-end.

Dirígete a https://stackblitz.com/ , regístrate para obtener una cuenta usando tu cuenta de GitHub e INICIE UNA NUEVA APLICACIÓN basada en la plantilla Angular. ¡Eso es! Está listo para comenzar a experimentar con Angular directamente desde su navegador web sin instalar un entorno de desarrollo local.

¿Qué es una promesa en JavaScript?

En JavaScript, una promesa es una abstracción de API que le permite manejar operaciones asincrónicas sincrónicamente.

Digamos que desea trabajar con algunos datos obtenidos de un servidor remoto. Dado que esta es una operación asincrónica (es decir, su código debe esperar la respuesta del servidor antes de que pueda continuar con su ejecución), en lugar de esperar a que se recuperen los datos, podemos crear una promesa que maneje la situación y permita que la aplicación continuar ejecutando otras operaciones.

Cuando se obtienen los datos, la promesa sabrá qué hacer con ellos. Esto es similar a las devoluciones de llamada, pero las promesas tienen una API y características mejores.

¿Cómo crear una promesa?

Puede crear una promesa, utilizando una API de JavaScript fácil de usar introducida desde ES6 o JavaScript 2015. Este es un ejemplo de un objeto de promesa simple que devuelve ¡Prometo devolverlo después de 1 segundo!

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('I promise to return this after 1 second!');
  }, 1000);
});
promise.then(function(value) {
  console.log(value);
});

Primero crea una instancia de Promisey proporciona una función, llamada ejecutor, con dos argumentos: resolver y rechazar. En el cuerpo de la función, pones tu código asincrónico. En este caso, es una función de tiempo de espera simple que resuelve la promesa después de un segundo.

Cuando su código asincrónico se ejecuta correctamente, debe llamar a la resolve()función que toma como argumento el valor que debe devolverse, si lo hay, o nada. Si algo sale mal, debe llamar al reject()método, que también puede tomar un valor como el error que ocurrió, por ejemplo.

Después de crear la instancia de la promesa, debe llamar a su then()método con una función como argumento. Esta función se ejecutará cuando se resuelva la promesa El then()método puede tomar otra función como segundo argumento que se llamará cuando se rechace la promesa .

En los puntos donde se llaman las funciones resolvereject, la promesa se resuelve o se rechaza. La función ejecutora llama a un código asincrónico y, una vez que se completa, llama a la resolvefunción para resolver la promesa o la rechaza si se produce un error.

Promisepuede estar en uno de los siguientes estados:

  • pending: este es el estado inicial, ni cumplido ni rechazado.
  • fulfilled: la operación se completó con éxito.
  • rejected: la operación falló.

El Promiseobjeto tiene los siguientes métodos:

  • Promise.prototype.catch():
  • Promise.prototype.finally()

Promise.prototype.then():

  • Promise.all(): Espera a que se resuelvan todas las promesas o que alguna sea rechazada.
  • Promise.allSettled(): Espere hasta que todas las promesas se hayan resuelto (cada una puede resolverse o rechazar).

  • Promise.race(): Espera hasta que se resuelva o rechace alguna de las promesas.

  • Promise.reject(): Devuelve un nuevo Promiseobjeto que es rechazado con el motivo dado.

  • Promise.resolve(): Devuelve un nuevo Promiseobjeto que se resuelve con el valor dado.

Ejemplo de promesa con HttpClienty angular 7/8

Ahora, veamos cómo usar promesas con Angular 7/8. Regrese a su proyecto Angular en el IDE en línea y comencemos por configurar el HttpClientenvío de solicitudes de API a servidores web para crear o obtener datos.

La obtención de datos es una operación asincrónica común, ya que siempre debe esperar un tiempo para recibir los datos solicitados. En Angular 7/8, puede usarlo HttpClientpara obtener datos.

HttpClient utiliza RxJS Observables para manejar operaciones asincrónicas, veamos cómo usar JavaScript / ES6 Promises en su lugar.

En el app/app.module.tsarchivo de su proyecto, agregue los siguientes cambios:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule }  from '@angular/common/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Simplemente importa HttpClientModuley agrega a la importsmatriz de AppModule.

Eso es, ahora puede inyectar HttpClientun componente y usarlo para enviar solicitudes de API.

Abra el app/app.component.tsarchivo y comience importando e inyectando HttpClient:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  apiUrl = 'https://www.techiediaries.com/api/data.json';

  constructor(private httpClient: HttpClient){}
 }

También importamos e implementamos OnInit, por lo que podemos usar el ngOnInit()método del ciclo de vida. A continuación, declaramos la apiUrlvariable que contiene nuestro punto final de datos.

A continuación, definamos un método fetchData () y llamémoslo de la ngOnInit()siguiente manera:

export class AppComponent implements OnInit  {
  name = 'Angular';
  apiUrl = 'https://www.techiediaries.com/api/data.json';

  constructor(private httpClient: HttpClient){}

  ngOnInit(){
    this.fetchData();
  }

  private fetchData(){}
}

Ahora, necesitamos agregar la obtención de datos en el fetchData()método.

Podemos enviar una solicitud GET HTTP utilizando el get()método que devuelve un RxJS Observable pero podemos obtener una Promesa de JavaScript utilizando el toPromise()método de Observable:

  private fetchData(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);       
  }

Llamamos al get()método con nuestra URL de API y llamamos al toPromise()método para obtener una promesa de la promesa devuelta.

La solicitud de API no se enviará hasta que llamemos al then()método de la promesa de la siguiente manera:

  private fetchData(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);  
    promise.then((data)=>{
      console.log("Promise resolved with: " + JSON.stringify(data));
    }, (error)=>{
      console.log("Promise rejected with " + JSON.stringify(error));
    })
  }

El then()método toma dos funciones de argumento que serán llamadas respectivamente cuando la promesa se resuelva con datos recuperados o se rechace con un error:

Promesa de Angular 8 resuelta

La promesa se resuelve con los datos obtenidos.

También puede escribir el código anterior de la siguiente manera:

  private fetchData(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);  
    promise.then((data)=>{
      console.log("Promise resolved with: " + JSON.stringify(data));
    }).catch((error)=>{
      console.log("Promise rejected with " + JSON.stringify(error));
    });
  }

Ahora, el manejo de datos y el código de manejo de errores están separados.

Puede proporcionar una URL incorrecta para ver la promesa rechazada con el error:

Promesa de Angular 8 rechazada

Puede encontrar el ejemplo en este enlace .

Conclusión

A lo largo de este tutorial, hemos aprendido sobre JavaScript Promises, introducido en ES6 con un ejemplo de Angular 7/8.

Publicar un comentario

0 Comentarios