16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Planes Iniciar sesión Menú

< Blog

 Qué son y cómo funcionan las promesas en JavaScr…

30
sergiodxa 20772 Puntos  hace 2 años

Manejar ujos de datos asíncronos es complejo, quién no ha terminado con

código como este:

checkWeather('buenos aires', (error, weather) => {

if (error) throw error;

if (weather === 'well') {

return checkFlights('buenos aires', (err, flights) => {
if (err) throw err;

buyTicket(flights[0], (e, ticket) => {

if (e) throw e;
console.log('ticket nº %d', ticket.number);
});
});
}

console.log('el clima es malo');

});

Esto se conoce como el callback hell, un código complejo y difícil de mantener,

pero existe una solución, Promesas. El código anterior con promesas sería algo
similar a esto:
 
Share 319 Twittear Share
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 1/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

checkWatcher('buenos aires')
.then(weather => {
if (weather === 'well') {
return checkFlights('buenos aires');
}
throw new Error('el clima es malo');
})
.then(flights => buyTicket(flights[0]))
.then(ticket => {
console.log('ticket nº %d', ticket.number);
})
.catch(error => console.error(error));

Menos líneas y mucha menos indentación en el código, pero entendamos como

funciona una promesa. Pongamos otro ejemplo. Supongamos que vamos a
comprar comida a un restaurante de comida rápida, cuando terminamos de pagar
por nuestra comida nos dan un ticket con un número, cuando llamen a ese
número podemos entonces ir a buscar nuestra comida.

Ese ticket que nos dieron es nuestra promesa, ese ticket nos indica que
eventualmente vamos a tener nuestra comida, pero que todavía no la tenemos.
Cuando llaman a ese número para que vayamos a buscar la comida entonces
quiere decir que la promesa se completó. Pero resulta que una promesa se puede
completar correctamente o puede ocurrir un error, ¿Qué error puede ocurrir en
nuestro caso? Por ejemplo puede pasar que el restaurante no tenga más comida,
entonces cuando nos llamen con nuestro número pueden pasar dos cosas.

1. Nuestro pedido se resuelve y obtenemos la comida.

2. Nuestro pedido es rechazado y obtenemos una razón del por qué.

Pongamos esto en código:

const ticket = getFood();

ticket
.then(food => eatFood(food))
.catch(error => getRefund(error));

 
Share 319 Twittear Share
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 2/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Cuando tratamos de obtener la comida ( getFood ) obtuvimos una promesa

( ticket ), si esta se resuelve correctamente entonces recibimos nuestra comida

( food ) y nos la comemos ( eatFood ). Si nuestro pedido es rechazado entonces

obtenemos la razón ( error ) y pedimos que nos devuelvan el dinero ( getRefund ).

Crear una promesa

Las promesas se crean usando un constructor llamado Promise y pasándole una

función que recibe dos parámetros, resolve y reject , que nos permiten indicarle

a esta que se resolvió o se rechazó.

const promise = new Promise((resolve, reject) => {

const number = Math.floor(Math.random() * 10);

setTimeout(
() => number > 5
? resolve(number)
: reject(new Error('Menor a 5')),
1000
);
});

promise
.then(number => console.log(number))
.catch(error => console.error(error));

Lo que acabamos de hacer es crear una nueva promesa que se va a completar

luego de 1 segundo, si el número aleatorio que generamos es mayor a 5 entonces
se resuelve, si es menor a 5 entonces es rechazada y obtenemos un error.

Estados de las promesas

Esto nos lleva a hablar del estado de una promesa, básicamente existen 3
posibles estados.

Pendiente
Resuelta
 
Share
30 Rechazada Share 319 Twittear

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 3/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Una promesa originalmente esta Pendiente. Cuando llamamos a resolve

entonces la promesa pasa a estar Resuelta, si llamamos a reject pasa a estar

Rechazada, usualmente cuando es rechazada obtenemos un error que nos va a
indicar la razón del rechazo. Cuando una promesa se resuelve entonces se
ejecuta la función que pasamos al método .then , si la promesa es rechazada

entonces se ejecuta la función que pasamos a .catch , de esta forma podemos

controlar el ujo de datos.

También es posible pasar una segunda función a .then la cual se

ejecutaría en caso de un error en vez de ejecutar el .catch

Recibiendo parámetros

Antes creamos una promesa, esa promesa se completa luego de 1 segundo y se

resuelve si el número generado es mayor a 5. ¿Qué pasa si queremos hacerlo
dinámico? La solución es muy simple, creamos una función que recibe los
parámetros necesarios y devuelve la instancia de Promise .

function randomDelayed(max = 10, expected = 5, delay = 1000) {

return new Promise((resolve, reject) => {
const number = Math.floor(
Math.random() * max)
);

setTimeout(
() => number > expected
? resolve(number)
: reject(new Error('número menor al esperado'));
delay
);
});
}

randomDelayed(100, 75, 2500)

.then(number => console.log(number))
.catch(error => console.error(error));
 
Share 319 Twittear Share
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 4/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Cuando ejecutamos randomDelayed(100, 75, 2500) creamos una promesa que

luego de 2.5 segundos se va a resolver siempre que el número generado (entre 0
y 100) sea mayor a 75. Lo mismo que habíamos hecho antes, pero esta vez
personalizable.

Pasando de callback a promesas

¿Qué ocurre si una función que queremos utiliza callbacks? ¿Cómo podríamos
usarla con promesas? Muy simple, podemos crear una versión con promesas de
esa función haciendo lo que hicimos arriba. Por ejemplo leer una archivo usando
el módulo fs de Node.js.

import fs from 'fs';

function readFile(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, 'utf8', (error, data) => {
if (error) return reject(error);
return resolve(data);
});
});
}

readFile('./archivo.txt')
.then(data => console.log(data))
.catch(error => console.error(error));

De esta forma creamos una función que lee un archivo del disco como utf8 y si
no ocurre ningún error entonces se resuelve, si hay un error es rechazada.

Encadenando promesas

En el primer ejemplo de promesas vimos algo muy interesante, usamos muchos

.then y llamamos a varias funciones que devuelven promesas. Este patrón se
llama promise chaining o encadenamiento de promesas.

Básicamente nos evita anidar código, en vez de eso una promesa puede devolver
 
otra
30
promesa y llamar al 319
Share siguiente .then de la Twittear
cadena. Veamos un ejemplo,
Share

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 5/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

supongamos que archivo.txt devuelve un string con el path de otro archivo, y

queremos leer este segundo archivo, con callbacks quedaría algo así:

fs.readFile('./archivo.txt', 'utf8', (error, path) => {

if (error) throw error;
fs.readFile(path, 'utf8', (err, data) => {
console.log(data);
});
});

Como vemos dentro de nuestro primer callback tenemos que validar el primer
error, luego llamar a otra función que obtiene los datos de verdad, y si tenemos
que ir anidando muchas funciones que usen callback podemos llegar a tener
muchos niveles de indentación. Con promesas esto quedaría así:

readFile('./archivo.txt')
.then(readFile)
.then(data => console.log(data))
.catch(error => console.error(error));

Qué hacemos acá, primero leemos ./archivo.txt , si ocurre un error esta

promesa se rechaza y lo mostramos en el console.error , si todo va bien se

ejecuta el primer .then , este ejecuta un nuevo readFile , como .then recibe el
path al nuevo archivo y readFile solo recibe un argumento (el path) entonces
podemos pasar directamente readFile y la promesa se encarga de ejecutarlo.

Este segundo readFile devuelve una nueva promesa, otra vez si hay un error se
ejecuta el .catch , pero si podemos leer el archivo sin problema entonces se

ejecuta el segundo .then , el cual recibe el contenido del segundo archivo y lo

muestra en consola.

Como vemos, podemos simplemente encadenar tantos .then como queramos y

seguir ejecutando funciones que devuelvan promesas. ¿Lo mejor? No solo hay
que devolver promesas, ya que si la función que pasamos a .then hace un return
 
entonces
30 el valor devuelto
Share 319 pasa al siguiente Twittear de la cadena, sin importar
.then Share que

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 6/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

sea una promesa, un objeto, un string, un número o cualquier otro tipo de datos.
Por ejemplo:

import { resolve } from 'path';

readFile('./archivo.txt.')
.then(resolve)
.then(readFile)
.then(data => console.log(data))
.catch(error => console.error(error));

La función resolve que exporta el módulo path nos permite armar la ruta
absoluta a un archivo y devuelve un string, gracias a los .then podemos hacer
una función que recibe el fileName del primero archivo y luego devuelve esta
ruta absoluta la cual llega como parámetro al segundo .then , el cual usa esa ruta

para leer el segundo archivo y devuelve una promesa que se resuelve con el
contenido de este. Y como siempre si en algún momento hay ocurre un error se
ejecuta el .catch .

Promesas en paralelo

Hasta ahora solo vimos como ejecutar una función asíncrona a la vez (en serie),
sin embargo es muy común que necesitemos realizar múltiples al tiempo, por
ejemplo para obtener varios datos de un API. Para eso la clase Promise tiene un
método estático llamado Promise.all el cual recibe un único parámetro, una lista
de promesas las cuales se ejecutan simultáneamente, si alguna de estas es
rechazadas entonces toda la lista lo es, pero si todas se resuelven entonces
podemos obtener una lista de todas las respuestas.

import { resolve } from 'path';

Promise.all([readFile('./archivo1.txt'), readFile('./archivo2.txt')])
.then(data => data.map(resolve))
.then(data => Promise.all(data.map(readFile)))
.then(finalData => console.log(finalData))
 .catch(error => console.error(error)); 
Share 319 Twittear Share
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 7/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Lo que hacemos en el ejemplo de arriba es leer 2 archivos al tiempo, eso nos

devuelve una lista ( data ) de contenidos, los cuales contienen la ruta para otro

archivo, los convertimos entonces a una nueva lista de rutas absolutas ( resolve )

y usamos esas rutas para crear una nueva lista de promesas a partir de readFile .

Si en algún momento ocurrió un error lo mostramos como tal en consola, si todo

se resuelve bien entonces escribimos en consola la lista de contenidos de
archivos.

Carrera de promesas

Antes hablamos de ejecutar varias promesas en paralelo y obtener una respuesta

cuando todas se completen, existe otro método que nos permite correr varias al
tiempo, pero solo obtener el resultado de la primer promesa. Gracias a esto es
posible mandar múltiples peticiones HTTP a un API y luego recibir una sola
respuesta, la primera. Este método se llama Promise.race .

import { resolve } from 'path';

Promise.race([readFile('./archivo1.txt'), readFile('./archivo2.txt'])
.then(resolve)
.then(readFile)
.then(data => console.log(data)
.catch(error => consol.error(error));

Como vemos en el ejemplo otra vez leemos 2 archivos, pero esta vez solo
obtenemos el contenido de 1, el que primero se termine de leer. O si alguno se
completó con un error entonces entramos al catch y mostramos el error en
consola.

Promesas resueltas inmediatamente

Algunas veces la forma de manejar el ujo de datos de las promesas

encadenando then nos facilita trabajar con nuestro código, para eso podemos
crear una promesa que inicie resuelta directamente usando un método estático
 
Share
de30 Promise . Share 319 Twittear

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 8/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Promise.resolve()
.then(() => {
// acá podemos hacer lo que queramos
});

Otra opción es pasarle un parámetro a resolve para que nuestro primer then

reciba ese valor.

import { resolve } from 'path';

Promise.resolve('./archivo1.txt')
.then(resolve)
.then(readFile)
.then(data => console.log(data))
.catch(error => console.error(error));

Como vemos iniciamos la cadena con un string y desde ahí obtenemos el path
absoluto, leemos el archivos y lo mostramos en consola.

Promesas rechazadas inmediatamente

De la misma forma que creamos promesas resuelta inmediatamente podemos

crear promesas rechazadas. Solo que esta vez usamos Promise.reject .

Promise.reject(new Error('Nuestro error'))

.then(() => {
// esta función jamás se ejecuta
})
.catch(error => console.error(error));

¿Para qué nos sirve esto? Si tenemos una función síncrona que queremos
resolver mediante promesas podríamos si da un error devolver Promise.reject

con el error y Promise.resolve con la respuesta correcta. De esta forma en vez de

crear una instancia de la clase Promise simplemente devolvemos la promesa ya
resuelta o ya rechazada.


Conclusiones 
Share 319 Twittear Share
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 9/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Trabajar con promesas nos facilita mucho el control de ujos de datos asíncronos
en una aplicación, además las promesas son la base para luego poder
implementar características más avanzadas de JavaScript como Async/Await
que nos facilitan aún más nuestro código.

Si quieres aprender más sobre JavaScript, entra a http://platzi.com/js e inscríbete

al curso de Fundamentos de JavaScript.

Qué aprender de Javascript en el 2017

Sergio Daniel
@sergiodxa 20772 Puntos  hace 2 años Todas sus entradas

    Insertar código  Enlace  Imagen   


Suma tu comentario +2  
Share 319 Twittear Share
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 10/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Ordenar por: Top

 renemarc 1274 Puntos  2 años

3 Artículo obligatorio para los aprendices de javascript

Los ejemplos no tienen pérdida alguna!!

Sólo dejo el código de la parametrizació de la promesa en la función que tiene una errata, lo pongo aquí: (y)

functionrandomDelayed(max = 10, expected = 5, delay = 1000) {

returnnew Promise((resolve, reject) => {
constnumber = Math.floor(Math.random() * max);

setTimeout(
() => number > expected
? resolve(number)
: reject(newError('número menor al esperado')),
delay
)
});
}

randomDelayed(100, 75, 2500)

.then(number => console.log(number))
.catch(error => console.error(error));

 josejaguirre 11969 Puntos  2 años

1 Hola Sergio como siempre artículos muy interesantes, te quería preguntar cuál es la mejor manera de
retornar el valor y asignárselo a una variable, algo así como el async/await

sergiodxa  2 años

Pues usando async/await, si usas promesas sin async/await entonces tenés que seguir el ujo de
1
los then , no podés salirte del ujo asíncrono.

 RicrdoMedina 4880 Puntos  2 años

1 Gracias por el aporte, esta bastante digerible el concepto de las promesas y su implementación para
manejar los ujo de datos asincronos en JS.

 Fockus 1136 Puntos  7 meses

1 no termino de entender por completo esto de las promesas creo que por que aun no domino por todo
javascript, pero en si, las promesas son la sustitución de peticiones Ajax con jquery, para hacer peticiones
asíncronas??

 VickHellenG 636 Puntos  un año

0 dentro de un bloque <script type=“text/javascript”> como se usaria jeje

sergiodxa  un año
  
Exactamente igual,
Share 319 aunque dependes de que el Twittear
navegador lo soporte (tip: todos losShare
navegadores
30 1
modernos soportan promesas desde hace tiempo).
https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 11/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

 giovaron19 6854 Puntos  un año

0 Yo quiero probar el codigo, pero no en todas las partes donde lo corro, no me genera sino errores o sino no
me muestra nada. Por favor alguien me quede decir que puedo hacer? Gracias

 Vktor 1265 Puntos  un año

0 No se si termino de entender bien el concepto de promesas y me queda una duda, quiere decir que si
utilizo algo para hacer una petición a un servidor y en base a lo que me devuelva usar otras funciones,
todas estas deberán ser llamadas dentro de un .then() para mantener el orden? es esto correcto?
un ejemplo de lo que digo sería:

fetch('https://datosDeServidor/Usuarios')
.then(r =>r.json());
.then(data =>{
otrafuncion(data);
diferenteFuncion(data);
//y aqui irán todos los metodos donde necesite la información del que pido del
servidor?
})sdsds

functionotrafuncion(usuario){
for(let i=0; usuario.length; i++){
console.log(usuario[i]["name"])
}
}

functiondiferenteFuncion(d){
console.log("otra funcionalidad");
}

en ese caso uso Fetch() para la petición el cual devuelve una promesa … pero es esa la forma mas optima de
trabajar con promesas?

Vktor  un año

0 esos sdsds no son intencionales, no me explico como los dejé ahí jajaj

 carl0scer0n 1223 Puntos  2 años

0 Muy bueno Muchas Gracias, aunque seria bueno que las partes de código estuvieran formateadas, leer
bloques de código así es algo molesto. 😃

sergiodxa  2 años

1 Hola, fue un error durante un cambio interno, ya esta todo arreglado 😃

 jmcataldo 368 Puntos  un año

0 Hola Sergio,

Muy bueno el artículo. Como puedo usar este ejemplo con setState de react para actualizar varias
 
instancias de una progress bar? el caso concreto es sobreTwittear
Share 319 un upload de varios cheros usando
Sharerebase.
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 12/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Gracias!

Entradas relacionadas


15

¿Por qué a nadie le importan tus ilustraciones, fotos o videos?

No hay nada más común en este mundo que gente talentosa viendo Net ix. Personas con
capacidades increíbles que ignoran que las tienen, o pe

cesarfajardo


13

Crea las historias que siempre quisiste vivir en los videojuegos

Todos los jugadores nos hemos sumergido en las historias que nos contaron nuestros
videojuegos favoritos, incluso llegamos a sentir que esos

PurpleDoll


5

3 herramientas de customer success para implementar en tu vida profesional

A lo largo de mi vida profesional, he tenido la dicha de trabajar en distintas áreas de trabajo:

ventas, turismo, programas en línea, docenc

ricardo-velasquez

Preguntas frecuentes Contáctanos Prensa Conferencias Términos y Condiciones Privacidad Estudiantes

Hola

 
Share 319 Twittear Share
30 Cambiar idioma

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 13/14
16/3/2019 Qué son y cómo funcionan las promesas en JavaScript

Español 

Entérate de todas las novedades en educación, negocios y tecnología

Correo electrónico Suscríbete

Ver todas

   

Platzi

Educación online de calidad

Reconocidos y premiados por

De LATAM con para el mundo

 
Share 319 Twittear Share
30

https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/ 14/14