Eliminando el callback hell usando promesas en JavaScript

Clase 33 de 51 • Fundamentos de JavaScript 2017

Resumen

En este video aprenderemos a implementar promesas que nos permitirán eliminar el callback hell

Armando Alamilla Cuellar

student•

Me he tardado varios días, pero finalmente aquí está mi aporte…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Un día de mi vida</title>
	</head>
	<body>
		<h1 id="agenda">Está sonando el despertador...</h1>
		<button id="si">Sí</button>
		<button id="no">No</button>
		<script>
			const INICIO = 1000;
			const DESPERTAR = 3000;
			const DUCHA = 2000;
			const VESTIRSE = 2000;
			const DESAYUNAR = 2000;
			const PLATZI = 3000;		
			const $agenda = document.getElementById('agenda');
			const $buttonSI = document.getElementById('si');
			const $buttonNO = document.getElementById('no');
			desaparecerBotones();

			function inicio(message) {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						$agenda.textContent = 'Me quiero levantar?';
						aparecerBotones();

						$buttonSI.addEventListener('click', () => {
							desaparecerBotones();
							resolve("Estoy despertando...");
						});

						$buttonNO.addEventListener('click', () => {
							desaparecerBotones();
							reject('Tengo flojera :(');
						});
					}, INICIO);
				});
			}

			function despertar(message) {
				$agenda.textContent = message;
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve('Ahora me estoy duchando...');
					}, DESPERTAR);
				});
			}

			function ducha(message) {
				$agenda.textContent = message;
				return new Promise((resolve, reject) => {
					$agenda.textContent = message;
					setTimeout(() => {
						resolve('Me estoy vistiendo...');
					}, DUCHA);
				});
			}

			function vestirme(message) {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						aparecerBotones();
						$agenda.textContent = '¿Hay comida en la nevera?';

						$buttonSI.addEventListener('click', () => {
							desaparecerBotones();
							resolve('Estoy comiendo una rica pizza...');
						});

						$buttonNO.addEventListener('click', () => {
							desaparecerBotones();
							reject('No hay comida, iré a comprar :(');
						});
					}, VESTIRSE);
				});
			}

			function desayunar(message) {
				$agenda.textContent = message;
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						aparecerBotones();
						$agenda.textContent = '¿Tengo conexcion a internet?';

						$buttonSI.addEventListener('click', () => {
							desaparecerBotones();
							resolve('Ahora estoy estudiando en Platzi...');
						});

						$buttonNO.addEventListener('click', () => {
							desaparecerBotones();
							reject('Necesito internet para entrar a Platzi :(');
						});
					}, DESAYUNAR);
				});
			}

			function estudiar(message) {			
				$agenda.textContent = message;
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						aparecerBotones();
						$agenda.textContent = '¿Me quiero ir a dormir?';

						$buttonSI.addEventListener('click', () => {
							desaparecerBotones();
							resolve('Mi día ha terminado, iré a dormir');
						});

						$buttonNO.addEventListener('click', () => {
							desaparecerBotones();
							reject('Seguiré estudiando hasta quedarme dormido...');
						});
					}, PLATZI);
				});
			}

			function aparecerBotones() {
				$buttonSI.setAttribute("style","visibility:visible");
				$buttonNO.setAttribute("style","visibility:visible");
			}

			function desaparecerBotones(){
				$buttonSI.setAttribute("style","visibility:hidden");
				$buttonNO.setAttribute("style","visibility:hidden");
			}

			function error(message) {
				$agenda.style.color = 'red';
				$agenda.textContent = message;
			}

			inicio()
			.then(despertar)
			.then(ducha)
			.then(vestirme)
			.then(desayunar)
			.then(estudiar)
			.then((message) => $agenda.textContent = message)
			.catch(error)

		</script> 
	</body>
</html>

Alfonso Jiménez Ruz

student•

Muchísimas Gracias por tu aporte. Lo he programado y PERFECTO!!!

Miguel Angel Espeso Alvarez

student•

Muy bueno, lo tomaré como guía para mi propuesta.
Gracias por tu aporte.

Jhonatan C Hurtado

student•

Mi ejemplo con promesas 😃

`<!DOCTYPE html>

<html lang=“es”> <head> <meta charset=“UTF-8”> <title>Promise Javascript</title> </head> <body> <h1 id=“texto”></h1>

<script>

	let texto = document.getElementById('texto')

	function consulta(){
		let responsoHtml = prompt('¿Te gusta Html: Si - No').toLowerCase();
		return new Promise( (resolve, reject) => {
			if(responsoHtml === 'si'){
				resolve('Te gusta Html')
			} else {
				reject('No te gusta Html')
			}
		})
	}

	function resultado(message){
		texto.textContent = message
		console.log(message)
	}

	function error(message){
		texto.textContent = message
		console.log(message)
	}

	consulta()
		.then(resultado)
		.catch(error)
</script>

</body> </html>`

Edgardo Paci

student•

muy bueno!

Julian Ferronato

student•

Leonidas no podes dar todos los cursos de platzi vos? jajaj se te entiende perfecto todo, muchas gracias.

Nicole Chapaval

Team Platzi•

Leo está haciendo cada vez más contenido. Pronto lo verás también en los nuevos cursos de React 😃

Joaquin Araujo

student•

Me quedó mucho más claro el tema de las promesas.

Joaquin Araujo

student•

const pasos = document.getElementById('pasos')
const AGARRARLA = 2000
const ABRIRLA = 2000
const MANTEQUILLA = 2000
const LOQUESEA = 2000 // Queso, Jamón, Huevos, Pollo, Carne, Tocineta, etc...
const COMERLA = 2000

Joaquin Araujo

student•

function errArepa(err) {
    pasos.textContent = 'Una sola arepa no te va a quitar el hambre, prepara más'
    pasos.style.color = 'red'
}

Jose Manuel Montaño Saenz

student•

Reto completo, un simple prompt y un if de una sola linea

<!DOCTYPE html>
<html>
<head>
	<title>Callbacks Hell</title>
</head>
<body>
	<h1 id="agenda">Estoy despertando</h1>
	<script type="text/javascript">
		const DESPERTAR = 3000
		const DUCHA = 2000;
		const VESTIRSE = 2000;
		const DESAYUNAR = 2000;
		const PLATZI = 5000;
		const $agenda = document.getElementById("agenda")

		function despertar() {
			return new Promise((resolve, reject) =>{
				setTimeout(() =>{
					resolve("Ahora me estoy duchando...")
				}, DESPERTAR)
			});
		}

		function ducha(message) {
			$agenda.textContent = message; 
			return new Promise((resolve, reject) =>{
				setTimeout(() =>{
					resolve("Me estoy vistiendo...")
				}, DUCHA)
			});
		}

		function vestirme(message) {
			$agenda.textContent = message;
			return new Promise((resolve, reject) =>{
				setTimeout(() =>{
					var inside = prompt("Hay comida?")
					const resutado = (inside == "si")?resolve("Ahora estoy desayudando..."):reject("No hay comida")
				}, VESTIRSE)
			});
		}
		function desayunar(message) {
			$agenda.textContent = message;
			return new Promise((resolve, reject) =>{
				setTimeout(() =>{
					resolve("Estoy estudiando...") 
				}, DESAYUNAR)
			});
		}
		function platzi(message) {
			$agenda.textContent = message;
			return new Promise((resolve, reject) =>{
				setTimeout(() =>{
					resolve("Que lindo es estudiar en platzi") 
				}, PLATZI)
			});
		}

		function error(message){
			$agenda.style.color = "red";
			$agenda.textContent = message;
		}
		despertar()
		.then(ducha)
		.then(vestirme)
		.then(desayunar)
		.then(platzi)
		.then((message) => $agenda.textContent = message)
		.catch(error)
	</script>
</body>
</html>

Andrés Madrigal

student•

De donde salio este fragmento de código?
.then((message) => $agenda.textContent = message)
Me tiene con la duda como se utiliza correctamente, hay que agregarlo siempre al final de una promesa?

Steven Giraldo

student•

Andres_Mad revisa desde el minuto 17:25
Cuando hacemos .then(platzi) ejecutamos platzi con la promesa que nos va a responder en 5 segundos.
Así que el último then es para poder mostrar cuando recibimos la respuesta de "Que lindo es estudiar en Platzi"

Diego Hernán Meneses Sanchez

student•

Excelente , tanto Sacha como Leonidas explican muy bien, solo que Leonidas ha utilizado unos ejemplos muy prácticos para disipar la “complejidad” del tema.

Erika Analin Flores González

student•

Fue asombroso como un tema tan complejo, lo explico de forma tan sencilla. Ahora me quedaron claras las promesas.Ahora a practicar.

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi Repositorio en GitHub con el avance del curso

Repositorio

En el estan los ejercicios realizados en clase comentados, ademas de mis notas personales

<!-- Continuamos con el ejemplo anterior de un itineraria diario
en esta ocacion resolvimos el problema usando promesas para evitar el callbackHell -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Eliminando CallBackHell</title>
  </head>
  <body>
    <h1 id="accion"> Estoy Despertando</h1>
    <button type="button" name="button" id="si" class="btn">Si</button>
    <button type="button" name="button" id="no" class="btn">No</button>

<script>
  const DESPERTAR = 3000, DUCHA = 2000, VESTIRSE =2000, DESAYUNAR = 3000, PLATZI = 5000
  const $agenda = document.getElementById('accion')//asignamos constantes a los elementos del dom
  const $btnSi = document.getElementById('si')//asignamos constantes a los elementos del dom
  const $btnNo = document.getElementById('no')//asignamos constantes a los elementos del dom

  btnHide()//ocultamos los botones

  function despertar(){//creamos una funcion llamada despertar
    return new Promise((resolve, reject)=>setTimeout(()=>resolve('Ahora me voy a  duchar...'),DESPERTAR))
    //esta funcion nos retorna una promesa, la cual ejecuta un setTimeout y nos entrega como resolve un mensaje
  }

  function ducha(message){//creamos una funcion llamada ducha

    return new Promise((resolve, reject)=>{//retornamos una promesa
      $agenda.innerHTML = `${message} hay agua caliente?`//cambiamos el valor del elemento del dom
      btnShow()//mostramos los botones

      $btnSi.addEventListener('click', ()=>{//nos ponemos a la escucha del evento click en el boton si
        btnHide()//ocultamos los botones
        resolve(`Ahora me estoy vistiendo`)
        //finalizamos la promesa con un resolve
      })

      $btnNo.addEventListener('click', ()=>{//nos ponemos a la escucha del evento click en el boton no
        btnHide()//ocultamos los botones
        reject(`Rayos, no hay agua caliente`)
        //finalizamos la promesa con un reject
      })

    })
  }

  function vestirme(message){ //creamos una funcion que retorna una promesa
    $agenda.innerHTML = message//cambiamos el valor del elemento del dom
    return new Promise((resolve, reject)=>setTimeout(()=>resolve(`Ahora estoy Desayunando...`),VESTIRSE))
  }

  function desayunar(message){ //creamos una funcion que retorna una promesa
    $agenda.innerHTML = message//cambiamos el valor del elemento del dom
    return new Promise((resolve, reject)=>setTimeout(()=>resolve(`Ahora estoy estudiando en platzi`),DESAYUNAR))
  }

  function platzi(message){ //creamos una funcion que retorna una promesa
    $agenda.innerHTML = message//cambiamos el valor del elemento del dom
    return new Promise((resolve, reject)=>setTimeout(()=>resolve(`El curso de Javascript es el mejor`)  ,PLATZI))
  }

  function _handlerError(err){//creamos una funcion para manejar los errores
    $agenda.style.color=`red`//ponemos el texto del error en rojo
    $agenda.innerHTML= err//ponemos el error en el elemento del dom
  }

  despertar()//llamamos a la funcion despertar
  .then(ducha)//cuando la promesa de la funcion despertar se ejecute llamamos a la funcion ducha
  .then(vestirme)//cuando la promesa de la funcion ducha se ejecute con exito llamamos a la funcion vestirme
  .then(desayunar)//cuando la promesa de la funcion vestirme se ejecute con exito llamamos a la funcion desayunar
  .then(platzi)//cuando la promesa de la funcion desayunar se ejecute con exito llamamos a la funcion platzi
  .catch(_handlerError)//cuando ocurra un error en alguna de las promesas llamamos a la funcion _handlerError y le enviamos el error

  function btnShow() {//creamos una funcion para ocultar los botones
    $btnSi.setAttribute("style","visibility:visible")
    $btnNo.setAttribute("style","visibility:visible")
  }

  function btnHide(){//creamos una funcion para mostrar los botones
    $btnSi.setAttribute("style","visibility:hidden")
    $btnNo.setAttribute("style","visibility:hidden")
  }
</script>
</body>
</html>

Cristian Camilo Cucunubá

student•

RETO para no crear una funcion por cada actividad

function getActivity(word, time){
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          word == ''
          ?  resolve($routine.textContent = `Se termino mi dia :)`)
          :  resolve($routine.textContent = `Ahora estoy ${word}`)
        }, time)
      })
    }

    getActivity('duchando', DESPERTAR)
      .then(() => getActivity('vistiendo', DUCHA))
      .then(() => getActivity('desayunando', VESTIRSE))
      .then(() => getActivity('estudiando en platzi', DESAYUNO))
      .then(() => getActivity('', PLATZI))

Andrés Madrigal

student•

se te olvido poner reject en el local de la funcion

Luis Angel Avila Torres

student•

@Platzi, muchísimas por reforzar este tema de procesos asíncronos, realmente considero que hacía falta, sobre todo para las promesas.
@LeonidasEsteban, muchas gracias por tu entrega y compromiso en las clases, siempre explicas los temas con mucha claridad. Ahora me queda claro que las promesas no son más que una especie de condicionales o estructuras de control para procesos asíncronos, o al menos, así lo veo.

Carlos Francisco Betancourt Requena

student•

Hola Leonidas, pues ya llevo poco más de un día buscando la solución y doy…

En el ejercicio, se basa en preguntas, por ejemplo ¿Me voy a levantar? y hay 2 botones, uno para sí y otro para no, ya así para cada caso.

Lo que intento hacer es que cuando se le de clic al botón sí, entonces la promesa se cumple y se ejecuta el setTimeout y se muestra el mensaje correspondiente…

En ese mensaje que se muestra me gustaría que se viera así: Me estoy levantando, dame 3 segundos…

Y que los 3 segundos se vayan mostrando 3, 2,1 y 0 y cambie a la siguiente pregunta… espero ser claro.

Bueno, y para eso programe una función que recibe como parámetro un número y regresa el countdown desde ese número… al menos en la consola lo hace, por medio de console.log, la función es:

function contador(limite) {
      let count = limite;
      console.log(count);
      return setInterval(() => {
        count = count - 1;
        if (count >= 0) {
          // escribir dountador
          console.log(count);
        }
      }, 1000)
    }

El código completo está acá:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Callbacks</title>
  <style>
    .ocultar {
      display: none;
    }
  </style>
</head>

<body>

  <h1 id="agenda">Ya amaneció, ¿Me voy a levantar?</h1>

  <div id="botones">
    <button id="si">Sí</button>
    <button id="no">No</button>
  </div>

  <script>
    // Elementos del DOM
    const $agenda = document.getElementById('agenda');
    const $botones = document.getElementById('botones');
    const $botonSi = document.getElementById('si');
    const $botonNo = document.getElementById('no');

    // Constantes de tiempos
    const LEVANTARME = 3000;
    const DUCHA = 2000;
    const VESTIRSE = 2000;
    const DESAYUNAR = 2000;
    const PLATZI = 3000;

    // Declaración de funciones con promesas
    function despertar() {
      return new Promise((resolve, reject) => {
        $botonSi.addEventListener('click', () => {
          // contador(3)
          resolve('Me estoy levantando, dame ' + contador(3) + ' segundos...')
        })
        $botonNo.addEventListener('click', () => {
          reject('Estoy enfermo, no me voy a levantar :(')
        })
      })
    }

    function ducha(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Cambiar el mensaje
          $agenda.textContent = '¿Hay agua para bañarme?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora me estoy bañando, dame 2 segundos...')
          })
          $botonNo.addEventListener('click', () => {
            reject('No me puedo bañar, me quedaré en casa...')
          })
        }, LEVANTARME)
      })
    }

    function vestirme(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Cambiar el mensaje
          $agenda.textContent = 'Tengo hambre, ¿Hay comida en la cocina?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora estoy desayunando, dame 2 segudos...')
          })
          $botonNo.addEventListener('click', () => {
            reject('Iré a comprar comida...')
          })
        }, VESTIRSE)
      })
    }

    function desayunar(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Cambiar el mensaje
          $agenda.textContent = 'A estudiar en Platzi, ¿Hay Internet?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora estoy estudiando, tararé 3 segundos...')
          })
          $botonNo.addEventListener('click', () => {
            reject('No hay Internet :(')
          })
        }, DESAYUNAR)
      })
    }

    function platzi(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Ejecutar la siguiente promesa con setTimeou
      setTimeout(() => {
        // Cambiar el mensaje
        $agenda.textContent = 'Después de estudiar mucho, ahora sé que mi lenguaje favorito es Javascript!'
      }, PLATZI)
    }

    function error(message) {
      $agenda.style.color = 'red';
      $agenda.textContent = message;
    }

    function contador(limite) {
      let count = limite;
      // $countdown.textContent = count;
      $agenda.insertAdjacentHTML('afterbegin', '<div id="countdown"></div>');
      let $countdown = document.getElementById('countdown');
      $countdown.textContent = count;
      return setInterval(() => {
        count = count - 1;
        if (count >= 0) {
          // escribir dountador
          $countdown.textContent = count;
          // console.log(count);
        }
      }, 1000)
    }

    despertar()
      .then(ducha)
      .then(vestirme)
      .then(desayunar)
      .then(platzi)
      .catch(error)

  </script>
</body>

</html>

Ojala alguien pueda darme una manita… saludos a todos!!!

Andres Vera

student•

Acá dejo mi ejemplo de agenda con Asyn await, igual usa promesas

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h3 id="mensaje"></h3>
</body>
<script type="text/javascript">
	async function agenda(){
		const DORMIR=6000;
	  	const LEVANTARSE=1000;
	  	const DUCHARSE=2000;
	  	const VESTIRSE=4000;
	  	const DESAYUNAR=3000;
	  	
	  	let timerAuxiliar;
	  
	  	let obj=document.getElementById("mensaje");
	  	obj.estado=0;
	  
	  	timerAuxiliar=setInterval(()=>{
	    obj.estado==0?obj.textContent="z__z__z":obj.estado==1?obj.textContent="_z__z__":obj.textContent="__z__z_";
	      
	      obj.estado>=2?obj.estado=0:obj.estado++;
	    },200);
	  
	  
	  	const dormir=await new Promise((resolve,reject)=>{
	  		setTimeout(()=>{
	      		clearInterval(timerAuxiliar);
	      		resolve("Ahora estoy despierto!!")
	    	},DORMIR);
	  	});

	  	obj.textContent=dormir;

	  	const levantarse=await new Promise((resolve,reject)=>{
	  		setTimeout(()=>{
	      		clearInterval(timerAuxiliar);
	      		resolve("Ahora me estoy duchando...")
	    	},LEVANTARSE);
	  	});

	  	obj.textContent=levantarse;

	  	const vestirse=await new Promise((resolve,reject)=>{
	  		setTimeout(()=>{
	      		clearInterval(timerAuxiliar);
	      		resolve("Ahora estoy desayunando...")
	    	},VESTIRSE);
	  	});

	  	obj.textContent=vestirse;

	  	const desayunar=await new Promise((resolve,reject)=>{
	  		setTimeout(()=>{
	      		clearInterval(timerAuxiliar);
	      		resolve("ESTOY LISTO PARA EMPEZAR PLATZI!!")
	    	},DESAYUNAR);
	  	});

	  	obj.textContent=desayunar;
	  	
	  
	}
	agenda();
	</script>
</html>```

Juan Diego Silva Garcia

student•

JEJEJE me gustó este ejemplo con el setInterval() y el operador ternario para lograr la animación de una manera fácil.

Carlos Eduardo Garcia Tejeda

student•

Les dejo mi aporte usando un arreglo con el itinerario y usándolo a manera de objeto con recursividad:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <title>
            Promises
        </title>
    </head>
    <body>
        <h1 id="agenda">
            Hola Platzi
        </h1>
        <script>
            const agenda = document.getElementById('agenda');
			const ITINERARIO = [{
			    "tarea": "Estoy Despertando...",
			    "tiempo": 3000,
			    "error": "Estoy enfermo :("
			}, {
			    "tarea": "Estoy duchandome...",
			    "tiempo": 2000,
			    "error": "No hay agua :("
			}, {
			    "tarea": "Estoy Vistiendome...",
			    "tiempo": 2000,
			    "error": "No he lavado :("
			}, {
			    "tarea": "Estoy Desayunando...",
			    "tiempo": 3000,
			    "error": "No hay comida :("
			}, {
			    "tarea": "Estoy Estudiando...",
			    "tiempo": 5000,
			    "error": "Tengo flogera :("
			}];
			const ACCIONES = (elemento, seguir) => {
			    if (elemento.length && seguir) {
			        new Promise((exito, fallo) => {
			            setTimeout(() => {
			                try {
			                    if (Math.round(Math.random())) {
			                        exito(elemento);
			                    } else {
			                        fallo(elemento);
			                    }
			                } catch (e) {
			                    fallo(elemento);
			                }
			            }, elemento[0]["tiempo"]);
			        }).then(elemento => {
			            agenda.textContent = elemento[0]["tarea"];
			            elemento.shift();
			            return ACCIONES(elemento, 1);
			        }).catch(elemento => {
			            agenda.textContent = elemento[0]["error"];
			            return ACCIONES(elemento, 0);
			        });
			    } else {
			        agenda.textContent += "\r\n y al final termine :)";
			        agenda["style"]["white-space"] = "pre"
			    }
			};
			ACCIONES(ITINERARIO, 1);
        </script>
    </body>
</html>

Carlos Francisco Betancourt Requena

student•

Bueno, esta es mi versión del ejercicio, agregue una línea que muestra un contador regresivo. Saludos!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Callbacks</title>
  <style>
    .ocultar {
      display: none;
    }
    #countdown {
      color: red;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <h1 id="agenda">Ya amaneció, ¿Me voy a levantar?</h1>

  <div id="countdown"></div>

  <div id="botones">
    <button id="si">Sí</button>
    <button id="no">No</button>
  </div>

  <script>
    // Elementos del DOM
    const $agenda = document.getElementById('agenda');
    const $botones = document.getElementById('botones');
    const $botonSi = document.getElementById('si');
    const $botonNo = document.getElementById('no');
    const $countdown = document.getElementById('countdown');

    // Constantes de tiempos
    const LEVANTARME = 3000;
    const DUCHA = 2000;
    const VESTIRSE = 2000;
    const DESAYUNAR = 2000;
    const PLATZI = 3000;

    // Declaración de funciones con promesas
    function despertar() {
      return new Promise((resolve, reject) => {
        $botonSi.addEventListener('click', () => {
          resolve('Me estoy levantando...')
        })
        $botonNo.addEventListener('click', () => {
          reject('Estoy enfermo, no me voy a levantar :(')
        })
      })
    }

    function ducha(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Mostrar contador
      contador(LEVANTARME/1000);
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Ocultar countdown
          $countdown.classList.add('ocultar');
          // Cambiar el mensaje
          $agenda.textContent = '¿Hay agua para bañarme?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora me estoy bañando...')
          })
          $botonNo.addEventListener('click', () => {
            reject('No me puedo bañar, me quedaré en casa...')
          })
        }, LEVANTARME)
      })
    }

    function vestirme(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Mostrar contador
      $countdown.classList.remove('ocultar');
      contador(VESTIRSE/1000);
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Ocultar countdown
          $countdown.classList.add('ocultar');
          // Cambiar el mensaje
          $agenda.textContent = 'Tengo hambre, ¿Hay comida en la cocina?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora estoy desayunando...')
          })
          $botonNo.addEventListener('click', () => {
            reject('Iré a comprar comida...')
          })
        }, VESTIRSE)
      })
    }

    function desayunar(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Mostrar contador
      $countdown.classList.remove('ocultar');
      contador(DESAYUNAR/1000);
      // Ejecutar la siguiente promesa con setTimeou
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // Ocultar countdown
          $countdown.classList.add('ocultar');
          // Cambiar el mensaje
          $agenda.textContent = 'A estudiar en Platzi, ¿Hay Internet?'
          // Mostramos botones
          $botones.classList.remove('ocultar')
          $botonSi.addEventListener('click', () => {
            resolve('Ahora estoy estudiando...')
          })
          $botonNo.addEventListener('click', () => {
            reject('No hay Internet :(')
          })
        }, DESAYUNAR)
      })
    }

    function platzi(message) {
      // Ocultar botones
      $botones.classList.add('ocultar')
      // Mostrar mensaje de la función anterior
      $agenda.textContent = message;
      // Mostrar contador
      $countdown.classList.remove('ocultar');
      contador(PLATZI/1000);
      // Ejecutar la siguiente promesa con setTimeou
      setTimeout(() => {
        // Ocultar countdown
        $countdown.classList.add('ocultar');
        // Cambiar el mensaje
        $agenda.textContent = 'Después de estudiar mucho, ahora sé que mi lenguaje favorito es Javascript!'
      }, PLATZI)
    }

    function error(message) {
      $agenda.style.color = 'red';
      $agenda.textContent = message;
    }

    function contador(limite) {
      let count = limite;
      $countdown.textContent = 'Dame ' + count + ' segundos...';
      return setInterval(() => {
        count = count - 1;
        if (count >= 0) {
          // escribir contador
          $countdown.textContent = 'Dame ' + count + ' segundos...';
        }
      }, 1000)
    }

    despertar()
      .then(ducha)
      .then(vestirme)
      .then(desayunar)
      .then(platzi)
      .catch(error)

  </script>
</body>

</html>

LUIS DANIEL VAZQUEZ SERVIN

student•

Hola
Una pregunta, como sabe el programa cual es message, como identifica ese parametro para que sea de la promesa anterior

Diego Forero

Team Platzi•

Porque es lo que llega en el resolve de la promesa anterior.

LUIS DANIEL VAZQUEZ SERVIN

student•

Gracias!!

Milton Miranda C.

student•

Cómo he visto que otros compañeros ya han hecho lo sugerido por Leonidas, y para no hacer más de lo mismo, he hecho el ejercicio un poco diferente empleando setInterval, promesas y otras cositas.

<`<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
        <title>Programación de Tareas</title>
        <style>
            h1, h2{text-align: center}
            #tarea{margin: auto; margin-top: 40px; width: 50%; border: 2px; background-color: royalblue; padding: 15px; text-align: center; font-size: larger; font-weight: bolder; color: #fff}
            .interactive{margin: auto; width: 50%; padding: 15px; text-align: center}
            .cancelar{background-color: red; color: white; font-weight: bolder; padding: 6px;}
            #opinion{margin: auto; margin-top: 30px; width: 40%; background-color: #BFC9CA; padding-top: 25px; padding-bottom: 25px; text-align: center; font-size: larger; font-weight: bolder}
            .gusto{background-color: #5D6D7E; color: white; font-weight: bolder; padding: 5px; margin-right: 20px; margin-left: 20px}
        </style>
</head>
<body>
    <div><h1 id="agenda">Tareas del programador desconocido</h1></div>
    <div><h2 id="hora"></h2></div>
    <div id="tarea"></div>
    <div id="interactive1" class="interactive"><button id="cancelar" class="cancelar">Cancelar</button></div>
    <div id="interactive2" class="interactive">Cuando quieras puedes retomar tu cronograma<br><br><button id="retomar" class="cancelar">Retomar cronograma carajo</button></div>
    <div id="opinion"><button id="gusto" class="gusto">¿Te gustó esta aplicación?</button><button id="noGusto" class="gusto">¿No te gustó esta aplicación?</button></div>
	<script>
        /*Identificamos el día de la semana del sistema*/
        var d = new Date();
        var n = d.getDay();
        const dias = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
        var hoy = dias[n];

        /*Establecemos la hora de inicio*/
        var hora = 0;

        /*Definimos variables y elementos del DOM*/
        const $hora = document.getElementById('hora');
        $hora.innerHTML = `Es la hora ${hora} del día ${hoy}`;
        const $tarea = document.getElementById('tarea');
        $tarea.innerHTML = `¡Bienvenido(a) a tu agenda!`
        const $interactive1 = document.getElementById('interactive1');
        const $interactive2 = document.getElementById('interactive2');
        $interactive2.style.display="none";
        const botonCancelar = document.getElementById("cancelar");
        const botonRetomar = document.getElementById("retomar");
        const botonGusto = document.getElementById("gusto");
        const botonNoGusto = document.getElementById("noGusto");
        const $opinion = document.getElementById("opinion");


        /*El siguiente es un arreglo con cada una de las tareas a realizar de lunes a viernes. Cada tarea es igualmente un arreglo donde el primer elemento es la hora de inicio de la tarea, el segundo el nombre de la tarea y el tercero es las horas que debe durar la tarea*/
        var tareasA = [[0, "dormir", 5], [6, "ejercitarse", 1], [7, "ducharse y vestirse", 1], [8, "desayunar", 1], [9, "trabajar en tu proyecto", 3], [12, "almorzar", 2], [14, "continuar con tu proyecto", 4], [18, "caminar y divertirte", 2], [20, "dormir", 2]];

        /*El siguiente es un arreglo con cada una de las tareas a realizar de Sábado a Domingo.*/
        var tareasB = [[0, "dormir", 7], [8, "ducharse y vestirse", 1], [9, "desayunar", 1], [10, "Ir de compras", 2], [12, "almorzar", 2], [14, "Ver Netflix", 4], [18, "caminar y divertirte", 2], [20, "dormir", 2]];

        var tareas, intervalo, texTarea="Reiniciar...";

        /*La siguiente es la función que se encarga de definir que tarea se debe realizar, y que se le pasará (callback) al setInterval que hará las veces de reloj*/
        function reloj(){
            $hora.innerHTML = `Es la hora ${hora} del día ${hoy}`;
            tareas.forEach(function(element){
                let tarea = element;
                let horaTarea = tarea[0];
                textoTarea = tarea[1];
                if(hora === horaTarea){$tarea.innerHTML = `¡Es momento de ${textoTarea}!`; texTarea=textoTarea};
            });
            (hora<23)? hora++ : hora = 0;
        }

        /*La siguiente es la función que se le pasará al setInterval, cuando se cancelen las tareas a realizar*/
        function relojB(){
            $hora.innerHTML = `Es la hora ${hora} del día ${hoy}`;
            (hora<23)? hora++ : hora = 0;
        }

        /*La siguiente sentencia indica que array usar dependiendo si es fin de semana o no*/
        if(n === 0|| n===6){
            tareas = tareasB
            intervalo = setInterval(reloj,3000);
        }else{
            tareas = tareasA
            intervalo = setInterval(reloj,3000);
        }
        
        /*El siguiente código define el comportamiento del botón que cancela las tareas*/
        botonCancelar.addEventListener('click', ()=>{
            $interactive1.style.display="none";
            $interactive2.style.display="block";
            $tarea.style.backgroundColor="grey";
            clearInterval(intervalo);
            $tarea.innerHTML = `¡Parece que tienes nuevos planes!`;
            intervalo =  setInterval(relojB,3000);
        })

        /*El siguiente código define el comportamiento del botón que reanuda las tareas*/
        botonRetomar.addEventListener('click', ()=>{
            $interactive1.style.display="block";
            $interactive2.style.display="none";
            $tarea.style.backgroundColor="royalblue";
            clearInterval(intervalo);
            $tarea.innerHTML = `¡Has cancelado la última tarea en curso!<br>Te notificaré cuando sea el momento de iniciar una nueva tarea.`;
            intervalo = setInterval(reloj,3000);
        })

        /*A continuación se declara una promesa que recibirá los eventos "click" de los botones gusto y no gustó, estableciendo a cada uno como resolve y reject respectivamente*/
        const gusto = new Promise ((resolve, reject)=>{
            botonGusto.addEventListener('click', ()=>{
                resolve(`¡Que bien!<br>Nos hace muy feliz tu respuesta.<br>¡Todo el equipo de desarrollo irá a celebrarlo!`)
            });
            botonNoGusto.addEventListener('click', ()=>{
                reject(`Gracias por tu opinión. Haremos todo lo posible por mejorar.`)
            })
        });

        /*A continuación se llama a la promesa lanzando un mensaje distinto y cambiando el estilo del div, según la respuesta de la promesa*/
        gusto.then((mensaje)=>{
            $opinion.innerHTML = mensaje;
            $opinion.style.backgroundColor="#D6EAF8";
        }).catch((mensaje)=>{
            $opinion.innerHTML = mensaje;
            $opinion.style.backgroundColor="#F1948A";
        })
    </script>
  </body>
</html>`>

Oscar Barajas Tavares

Team Platzi•

Excelente ejercicio. Con este tipo de retos es como uno mejora el conocimiento aprendido.

Lucas Zanek

student•

Mi ejemplo

<!DOCTYPE html>
<html>
<head>
	<title>Promesas Intinerario</title>
</head>
<body>
<h1 id="agenda">Buenos Dias Lucas</h1>
<button id="respuestaSI">SI</button>
<button id="respuestaNO">NO</button>
<script> 
	$botonSI =document.getElementById('respuestaSI')
	$botonNO =document.getElementById('respuestaNO')
	$textoH1 =document.getElementById('agenda')
	function despertarse(){

		//Pregunta si sali de la cama
		//Si contesta que si esconde botones, te da mensaje y pasa a ir banio
		//si da mal imprime error
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
				$textoH1.textContent = 'Ya saliste de la cama Lucas?'
				$botonSI.addEventListener("click",()=>{
				$textoH1.textContent = 'Bien, Arrancaste de maravilla la maniana'
				$botonSI.setAttribute("style","visibility:hidden");
				desaparecerBotones()
				resolve()
				})
				$botonNO.addEventListener("click",()=>{
				desaparecerBotones()
				reject('arrancaste mal')
				})

			},3000)
		})
	}

function aparecerBotones(){
	$botonSI.setAttribute("style","visibility:visible");
	$botonNO.setAttribute("style","visibility:visible");
}

function desaparecerBotones(){
	$botonSI.setAttribute("style","visibility:hidden");
	$botonNO.setAttribute("style","visibility:hidden");
}

function irAlBanio(message){

		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
				aparecerBotones()
				$textoH1.textContent = 'Ya te fuiste al banio?'
				$botonSI.addEventListener("click",()=>{
					resolve('Bueno podes desayunar')
				})
				$botonNO.addEventListener('click',()=>{
					reject('Tenes que igienisarte antes de salir')
				})
			},3000)
		})

	}

function desayunar(message){

		$textoH1.textContent = message
	
}	

function error(message){
		$textoH1.style.color = 'red'
		$textoH1.textContent = message
}

despertarse()
.then(irAlBanio)
.then(desayunar)
.catch(error)
</script>
</body>
</html>```

Jordy Rojas Aliaga

student•

El catch solo maneja el error de la promesa que ocurre primero? Solo se usará un catch ?

Diego Forero

Team Platzi•

La promesa por lo general solo retorna un error y es el que es capturado por el catch. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch

Jordy Rojas Aliaga

student•

@GOLLUM23 el error que retorna es el primero que ocurre cierto ?

Luis Gutiérrez

student•

Mi segundo ejemplo mas claro ya que llamas a una sola función.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Agenda con promesas</title>
</head>
<body>
	<script>
		const DESPERTAR = 1500
		const DUCHA = 2000
		const VESTIRSE = 1500
		const DESAYUNAR = 1500
		const TRABAJAR = 7000

		function accion (msj, tiempo, enfermo = false) {
			return new Promise((resolve, reject) => {
				if (enfermo === true) {
					setTimeout(() => {
						reject('Lo siento, estoy enfermo D=')
					}, 1000)
				} else {
					setTimeout(() => {
						resolve(msj)
					}, tiempo)
				}
			})
		}


		accion('Me estoy duchando...', DESPERTAR)
		.then((msj) => {
			console.log(msj)
			return accion('Me estoy vistiendo...', DUCHA)
		}).then((msj) => {
			console.log(msj)
			return accion('Estoy desayunando...', VESTIRSE)
		}).then((msj) => {
			console.log(msj)
			return accion('Estoy trabajando...', DESAYUNAR)
		}).then((msj) => {
			console.log(msj)
			return accion('Estoy descansando...', TRABAJAR)
		}).then((msj) => {
			console.log(msj)
		}).catch((err) => {
			console.log(err)
		})
	</script>
</body>
</html>

Daniel Quispe

student•

Aqui lo entendi mejor 😃

Eliminando el callback hell usando promesas en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial