Playground - Promesas

Leonardo de los angeles Espinoza Hernandez

student•

🛡️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 💪

Juan José González Vera

student•

Pregunta: ¿No debería estar el IF dentro del Timeout? ¿Como está puesto el error se ejecutaría después de 2 sg?

Gabriel Luna

student•

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....

Bryan Ochoa

student•

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.

Yerson Garza

student•

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);
    }
  });
 }

Diana Loboa

student•

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.

Hiver Tapia

student•

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);
      });     
 }
>

Jose Carlos Machado

student•

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);

  });
}

Ricardo Alfonso Chavez Vilcapoma

student•

¿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);
      }
    }
  })
}

Ricardo Alfonso Chavez Vilcapoma

student•

Respondiendome a mi mismo, en vez de null se ponía ""...pero ¿eso no es igual a null?

Leonardo de los angeles Espinoza Hernandez

student•

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

Nicolás Felipe Pinto Vega

student•

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

Leonardo de los angeles Espinoza Hernandez

student•

¡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

Romario André Julio B

student•

¿Por qué debo usar el namespace de window para ejecutar el setTimeout?

Duvan Alexis Palomino Ramirez

student•

porque asi esta programado para que cuando corran las pruebas en esta interfaz, la funcion se ejecute correctamente

Alejandro Anaya

student•

Es la forma en la que el probador puede acceder a este método de la ventana del navegador.

David Galvan

student•

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);
  });
}

Joan Alexander Valerio Rodríguez

student•

Este es un escudo anti spoiler . . . . . . . . . . . . .

Toma tu tiempo en crear buenas validaciones, ahí esta la clave en este código.

Mi aporte:

Ricardo Alfonso Chavez Vilcapoma

student•

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"));
            }
        }
    })
}

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

student•

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

Harrison Steve Pinzón Neira

student•

Aporte de mi solucion! . . . . . . . . . . .

David Ochoa

student•

🛡️🛡️🛡️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);
    }
  });
}

Michelle Luna

student•

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)
    }
  }

  )
}

Pablo Perez

student•

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)
  })
}

Julio Bastidas

student•

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;
    }
  });
}

Rubén Hernández Hernández

student•

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)
  })
}

Sergio Luis Arango Montes

student•

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)
  )

}

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"));
    }
  });
}

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`));
      }
    }
  });
}

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);
    }
  });
 }

<
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);
      });     
 }
> 

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);

  });
}

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);
      }
    }
  })
}

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);
    }
  })
}

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);
    }
  })
}

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);
    }
  })
}

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);
  });
}

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"));
            }
        }
    })
}

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

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);
    }
  });
}

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)
    }
  }

  )
}

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;
    }
  });
}

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)
  )

}

Playground - Promesas

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Playground - Válida el formulario

Día 13

Métodos de arrays: Includes, Join y concat

Playground - agrupa los productos

Métodos de arrays: Flat y FlatMap

Playground - Encuentra la ubicación del valor buscado

Día 14

Mutable functions

Playground - Modifica una lista de compras

Métodos de arrays: sort

Playground - Ordena los productos

Día 15 - Checkpoint

Playground - Sistema de reservaciones de un hotel

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Playground - Congela el objeto recursivamente

Día 17

Prototipos en JavaScript

Playground - Modifica el prototype de los arrays

Playground - Crea un auto usando clases

Día 18

Abstracción en JavaScript

Playground - Sistema de carrito de compras

Encapsulamiento en JavaScript

Playground - Encapsula datos de los usuarios