Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Ejemplo práctico de Promise con javascript
Actualizado el 28 Enero, 2018 y leído 1,270 veces
Calificación: Sin calificar 10

Ejemplo práctico de Promise con javascript

Anexsoft

¿Qué son?

Es una respuesta que esperamos a un evento que desencadenamos, es decir lo que me prometiste queremos saber si lo puedes cumplir o no. Es un objeto que nos va a permitir manipular un éxito o fracaso de manera más eficiente evitando la manipulación exagerada de los callbacks.

Ejemplo:

doSomething().then(x => {
    console.log('Parece que doSomething ha terminado con éxito');
})

 

Navegadores soportados

Todo los modernos excluyendo por completo cualquier versión de Internet Explorer. Mayor información revisar el siguiente enlace.

 

Que beneficios trae

Las promesas nos van ayudar mucho a interceptar eventos asíncronos, hará que tu código sea más legible y te permitará escalar mejor entre otros beneficios más. Los ejemplos que haré ayudarán a expandir nuestra creatividad.

 

Ejemplo sin Promise

Un ejemplo simple realizando una petición ajax a nuestra api de prueba auspiciada por JsonPlaceHolder.

function getPosts(success, error) {
var req = new XMLHttpRequest();
    req.open('GET', 'https://jsonplaceholder.typicode.com/posts');

    req.onload = function() {
      if (req.status == 200) {
        success(JSON.parse(req.response));
      }
      else {
        error();
      }
    };

    req.send();
}

getPosts(
    function(r) {
        console.log(r)
    },
    function(r) {
        console.log('Ocurrió un error')
    },
)

Tuvimos que hacer 2 callbacks a nuestra función getPosts para interceptar los eventos. Bien veremos que este código te parecerá engorroso luego de hacer el ejemplo usando un Promise.

 

Ejemplo con Promise

Ahora vamos a ver el ejemplo haciendo uso de las Promesas (Promise).

function getPosts() {
	return new Promise(function(resolve, reject) {
	var req = new XMLHttpRequest();
		req.open('GET', 'https://jsonplaceholder.typicode.com/posts');

		req.onload = function() {
		  if (req.status == 200) {
			resolve(JSON.parse(req.response));
		  }
		  else {
			reject();
		  }
		};

		req.send();
	})
}


getPosts().then(r =>{
    console.log(r);
  }).catch(() => {
    console.log('Algo salió mal');
  });
  • Then: en caso de éxito ingresar a este método.
  • Catch: en caso de fracaso.

Nota: si se dieron cuenta los callbacks estan inyectado dentro de nuestra función getPosts para decirle al Promise que debe devolver o hacer. Luego para el desarrollador que requiera usar esta función la vida se le hará más sencilla al tener un código más legible.

 

Flujo de una promesa

Cuando una promesa es disparada esta ingresa a un estado la cual puede ser las siguientes:

  • fulfilled: se cumplió con éxito.
  • rejected: no se pudo cumplir a casa de un error. Depende de ustedes como hagan el reject.
  • pending: se esta procesando.
  • settled: simplemente finalizo.

 

Encadenamiento

Podemos usar las promesas para generar secuencias de nuestro código. Partiendo del ejemplo anterior cuando hacemos el then obtenemos los registros que nuestra API retornó, ahora lo que quiero es hacer otro then para obtener un registro específico.

function getPosts() {
	return new Promise(function(resolve, reject) {
	var req = new XMLHttpRequest();
		req.open('GET', 'https://jsonplaceholder.typicode.com/posts');

		req.onload = function() {
		  if (req.status == 200) {
			resolve(JSON.parse(req.response));
		  }
		  else {
			reject();
		  }
		};

		req.send();
	})
}

let postId = 1;
getPosts().then(r => {
    return r;
}).then(r => {
  console.log(r.find(x => x.id === 1));
})

Aunque el ejemplo es algo tonto tal vez porque podíamos haberlo resuelto con el primer then, la idea es que se entienda lo que podemos lograr. Por si no entienden el código, el primer then hace un return y se lo pasa al segundo de esta manera logramos la ejecución en cadena.

 

Esperando la finalización de varias peticiones asíncronas

Recuerdo un caso que tenía que mostrar un dashboard en un landing page y cargaba muchas peticiones Ajax. Pues bien, era bonito y puse un loader mientras que estas iban cargando pero que pasaría si quisiera esperar que todas hayan finalizado y finalmente mostrar de golpe el landing page. Lo que podemos hacer es una array de promesas y finalmente llamar a nuestra clase Promise para que las intercepte.

function getPosts() {
	return new Promise(function(resolve, reject) {
	var req = new XMLHttpRequest();
		req.open('GET', 'https://jsonplaceholder.typicode.com/posts');

		req.onload = function() {
		  if (req.status == 200) {
			resolve(JSON.parse(req.response));
		  }
		  else {
			reject();
		  }
		};

		req.send();
	})
}

var promises = [
	getPosts(),
  getPosts()
];

Promise.all(promises).then(results => {
	console.log(results)
})

Ahora mi then va a obtener un array de los resultados obtenidos por cada promesa.

 

Estoy adjutando una publicación de Google que es artículo más completo y que me base para realizar esta publicación.

¡Adquiera ya!

  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2018 Anexsoft, blog y cursos online de TI.