Contenido del curso
Playground - Promesas
Leonardo de los angeles Espinoza Hernandez
Estudiante
Juan José González Vera
Estudiante
Gabriel Luna
Estudiante
Bryan Ochoa
Estudiante
Yerson Garza
Estudiante
Diana Loboa
Estudiante
Hiver Tapia
Estudiante
Jose Carlos Machado
Estudiante
Ricardo Alfonso Chavez Vilcapoma
EstudianteRicardo Alfonso Chavez Vilcapoma
EstudianteLeonardo de los angeles Espinoza Hernandez
Estudiante
Nicolás Felipe Pinto Vega
EstudianteLeonardo de los angeles Espinoza Hernandez
Estudiante
Romario André Julio B
Estudiante
Duvan Alexis Palomino Ramirez
Estudiante
Alejandro Anaya
Estudiante
David Galvan
Estudiante
Joan Alexander Valerio Rodríguez
EstudianteRicardo Alfonso Chavez Vilcapoma
Estudiante
IRIDIAN GUADALUPE CARRERA MONDRAGÓN
Estudiante
Harrison Steve Pinzón Neira
Estudiante
David Ochoa
Estudiante
Michelle Luna
Estudiante
Pablo Perez
Estudiante
Julio Bastidas
Estudiante
Rubén Hernández Hernández
Estudiante
Sergio Luis Arango Montes
Estudiante🛡️Escudo anti-spoilers🛡️
/ Las promesas son uno de esos temas que te recomienda ver más de una vez porque te van a volar la cabeza más a futuro. Te dejo el curso de asincronismo en JavaScript para que lo puedas entender mejor y te prometo que estos ejercicios se volverán más sencillos... o no 😉 / Después del gif tendrás la solución explicada a este ejercicio 👇 !cat
Explicación 📖
Ahora sí, aquí tienes la explicación
export function sendEmail(email, subject, body) { // De entrada empezamos retornando una promesa // La cual nos provee de resolve y reject dependiendo si hay éxito en esta return new Promise((resolve, reject) => { // Primero validamos que todos los aspectos del email estén disponibles if (email && subject && body) { // De ser así, creamos un timeout para "enviar" el email // Recuerden hacer uso de window para que las pruebas pasen window.setTimeout(() => { // Dentro del timeout definimos un objeto con // todos los datos recibidos const emailInfo = { email, subject, body, }; // Y lo pasamos a la resolución exitosa de la promesa // Para que esto sea "enviado" después de 2 segundos resolve(emailInfo); }, 2000); } else { // En caso de faltar algún dato, lanzamos un error indicándolo reject(new Error("Hacen falta datos para poder enviar el correo")); } }); }
Creo que al menos esta promesa es fácil de entender sin la explicación, de igual manera, te invito a que compartas tu solución y nos dejes cualquier duda que tengas respecto a esta solución o problema 💪
Pregunta: ¿No debería estar el IF dentro del Timeout? ¿Como está puesto el error se ejecutaría después de 2 sg?
En el ejemplo 2 de la guía indica que el mensaje de error tendría que ser "después de 2 segundos"
Me parece o la solución planteada no cumple esto....
Aquí mi solución. En el mensaje de error también se muestra qué campos faltan.
export function sendEmail(email, subject, body) { // Tu código aquí 👈 const emailBlock = { email, subject, body }; return new Promise((resolve, reject) => { if (email && subject && body) { window.setTimeout(() => resolve(emailBlock), 2000); } else { const missing = Object.keys(emailBlock).filter(item => emailBlock[item] == false); if (missing.length == 1) { reject(new Error(`Falta el campo ${missing[0]} para enviar el mensaje`)); } else{ reject(new Error(`Faltan los campos ${new Intl.ListFormat('es').format(missing)} para enviar el mensaje`)); } } }); }
De este video aprendí que Intl.ListFormat().format() devuelve una cadena con los elementos del arreglo según el lenguaje. Para el español agrega (por defecto) la conjunción "y" antes del último elemento.
estuvo bueno el playground! * * * * * * * * *
export function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { if (!email || !subject || !body) { reject(new Error("Faltan campos por rellenar")) } else { window.setTimeout(() => { const result = { email, subject, body }; resolve(result); }, 2000); } }); }
Mi solucion con algunos** cositas extras**:
Operador ternario
filter(Boolean)
"[email, subject, body].filter(Boolean).length == 3" es una comprobación que verifica si se han rellenado los campos necesarios. La función "filter" elimina cualquier valor falso de la lista de campos (como si alguno de los campos fuera null, undefined, o una cadena vacía) y si hay tres elementos, significa que se han rellenado los campos necesarios.
Tambien use el operador ternario para hacer el codigo en menos lineas.
En cada reto aprendo un montón.
< import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { return new Promise((resolve, reject) => { if (!email || !subject || !body) { reject(new Error("Hacen falta campos para enviar el email")); } else if (!/\S+@\S+\.\S+/.test(email)) { reject(new Error("El correo electrónico proporcionado no es válido")); } setTimeout(() => { resolve({ email, subject, body }); }, 2000); }); } >
Resolviendo promesas... :)
function sendEmail(email, subject, body) { // Tu código aquí 👈 const mail = { email, subject, body } return new Promise((resolve, reject) => { for (let prop in mail) { if (mail[prop].trim() == "") { window.setTimeout(() => { reject(new Error("Error: Hacen falta campos para enviar el email")) }, 2000); } } window.setTimeout(() => { resolve(mail); }, 2000); }); }
¿Cuál es el error en mi code? El error que me arroja la consulta es de los 3 rejects que tiene qeu arrojar...pero aquí si estoy validando
function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { if (email !== null && subject !== null && body !== null) { window.setTimeout(()=>{ resolve({ email: email, subject: subject, body: body }) } , 2000); } else { if (email === null || subject === null || body === null) { //setTimeout(() => { reject(new Error("Error: Hacen falta campos para enviar el email")); //}, 2000); } } }) }
Respondiendome a mi mismo, en vez de null se ponía ""...pero ¿eso no es igual a null?
Hola @ricardo999
Realmente no, son valores diferentes y aquí con un pequeño meme te lo explico
Para este ejemplo en particular estamos obteniendo los valores de un input, los input por default aunque no tengan un valor escrito tienen el value como un string vacío ("") que es como en el meme, que este caso el 0 sería el string vacío.
Espero te sea de ayuda mi comentario :D
Por que de esta manera mi código no pasó la primera prueba pero si todas las demás?
export function sendEmail(email, subject, body) { // Tu código aquí 👈 return new Promise((resolve, reject) => { if (email === "" || subject === "" || body === "") { reject(new Error("Hacen falta campos para enviar el email")); } else { window.setTimeout(resolve({ email, subject, body, }), 2000); } }) }
Pero de esta manera si pasó todos los tests
export function sendEmail(email, subject, body) { // Tu código aquí 👈 return new Promise((resolve, reject) => { if (email === "" || subject === "" || body === "") { reject(new Error("Hacen falta campos para enviar el email")); } else { window.setTimeout(() => { const emailInfo = { email, subject, body, }; resolve(emailInfo); }, 2000); } }) }
Tengo esa pequeña duda, gracias
¡Hola Felipe!
/
Ambas soluciones funcionan, el detalle con la segunda es que omitiste la función anonima, aquí te la pongo como arrow function (() =>)
export function sendEmail(email, subject, body) { // Tu código aquí 👈 return new Promise((resolve, reject) => { if (email === "" || subject === "" || body === "") { reject(newError("Hacen falta campos para enviar el email")); } else { // Justo después del setTimeuout ponemos la función anonima window.setTimeout(() => resolve({ email, subject, body, }), 2000); } }) }
Espero te sea de ayuda :D
¿Por qué debo usar el namespace de window para ejecutar el setTimeout?
porque asi esta programado para que cuando corran las pruebas en esta interfaz, la funcion se ejecute correctamente
Es la forma en la que el probador puede acceder a este método de la ventana del navegador.
Mi solución
export function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { if (!email || !subject || !body) reject(new Error("Error: Hacen falta campos para enviar el email")); window.setTimeout(() => { resolve({ email, subject, body }); }, 2000); }); }
Este es un escudo anti spoiler . . . . . . . . . . . . .
Toma tu tiempo en crear buenas validaciones, ahí esta la clave en este código.
Mi aporte:
Prometeme que no te rendirás
Pero si no cumples tu promesa, te dejo mi solución
function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { if (email !== "" && subject !== "" && body !== "") { window.setTimeout(() => { resolve({ email: email, subject: subject, body: body }) }, 2000); } else { if (email === "" || subject === "" || body === "") { reject(new Error("Error: Hacen falta campos para enviar el email")); } } }) }
Only running in console:
function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { const arrayResponse = {email, subject, body}; if (!email || !subject || !body) { setTimeout(() => { reject(new Error("Hacen falta campos para enviar el email")); }, 2000); } else { setTimeout(() => { resolve(arrayResponse); }, 2000); } }); } Input after 2 seconds: //Promise Resolved sendEmail("test@mail.com", "Nuevo reto", "Únete a los 30 días de JS") .then((result) => console.log(result)) .catch((error) => console.log(error)); //Promise Rejected sendEmail("test@mail.com", "", "Únete a los 30 días de JS") .then((result) => console.log(result)) .catch((error) => console.log(error)); Output after 2 seconds: { email: 'test@mail.com', subject: 'Nuevo reto', body: 'Únete a los 30 días de JS' } Error: Hacen falta campos para enviar el email
Aporte de mi solucion! . . . . . . . . . . .
🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️
Promesas
!Spoiler Shield
export function sendEmail(email, subject, body) { // Tu código aquí 👈 return new Promise((resolve, reject) => { if (email != "" && subject != "" && body != "") { setTimeout(() => { resolve({ email, subject, body, }); }, 2000); } else { setTimeout(() => { reject(new Error("Hacen falta campos para enviar el email")); }, 2000); } }); }
Mi solución:
export function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { if (email == "" || subject == "" || body == "") { reject(new Error("Error: Hacen falta campos para enviar el email")) } else { window.setTimeout(() => resolve({ email: email, subject: subject, body: body, }), 2000) } } ) }
mi solución: 🪄 🪄 🪄 🪄 🪄 🪄 🪄
export function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { setTimeout(() => { if (email && subject && body) { resolve({ email, subject, body, }) } else { reject(new Error("Error: Hacen falta campos para enviar el email")) } },2000) }) }
export function sendEmail(email, subject, body) { // Tu código aquí 👈 return new Promise((resolve, reject) => { if (email && subject && body) { window.setTimeout(() => { resolve({email, subject, body}) }, 2000); } else { reject(new Error("Datos incompletos para enviar correo")); return; } }); }
Mi solución pequeñita 💚
export function sendEmail(email, subject, body) { return new Promise((resolve, reject) => { if (!email || !subject || !body) { reject(new Error("Error: Hacen falta campos para enviar el email")) return; } window.setTimeout(() => { resolve({email, subject, body}) }, 2000) }) }
export function sendEmail(email, subject, body) { const message = "Hacen falta campos para enviar el email"; const MILLISECONDS = 2000; const falsyValues = [null, ""]; let mail = { email, subject, body } const rejectCondition = falsyValues.includes(email) || falsyValues.includes(subject) || falsyValues.includes(body); return new Promise ( (resolve, reject) => rejectCondition ? reject(new Error(message)) : window.setTimeout(() => resolve(mail), MILLISECONDS) ) }
