Playground - Resuelve el callback hell usando promesas
Clase 37 de 99 • 30 días de JavaScript
Contenido del curso
Pablo Pincay Alvarez
student•
hace 3 años
Clase 37 de 99 • 30 días de JavaScript
Contenido del curso
Pablo Pincay Alvarez
Osvaldo Martinez Guillen
Tatiana Muñoz Muñoz
Diana Loboa
Rahiber Paradas
Daniel Sebastián Rodríguez
Gutierrez Diego
Leonardo de los angeles Espinoza Hernandez
Natalia Ramirez Parra
Ricardo Alfonso Chavez Vilcapoma
Francisco Javier Solis Martinez
Joan Alexander Valerio Rodríguez
Ricardo Alfonso Chavez Vilcapoma
Andrés Soret Chacin
Harrison Steve Pinzón Neira
David Ochoa
Julio Bastidas
Carina Payleman
Alexis Corrales
Christian Ricardo Conchari Cabrera
Pariksit Erikrsnan Ortiz Flores
Daniel André Amaya López
Salvador Gonzalez Blanco
Angel Javier Sanchez Tenjo
. . ----------------------------------------- . ESCUDO ANTI SPOILER . ----------------------------------------- . . Este reto si que me hizo sudar. . .
. . . . . .
. . . . . . . . . .
pues bien hay que modificar los dos archivos, no sean como yo que pensaba que solo era uno.
tasks.js
export function doTask1() { return new Promise((resolve, reject) => (window.setTimeout(() => resolve('Task 1'), 300)) ); } export function doTask2() { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 2'), 300) }) } export function doTask3() { return new Promise((resolve, reject) => (window.setTimeout(() => resolve('Task 3'), 300)) ) }
solo le agregamos la promesa y el resolve
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1() .then(res => { strings.push(res) return doTask2(); }) .then(res => { strings.push(res) return doTask3(); }) .then(res => { strings.push(res) return strings }) .catch(error => { console.log(error) }); }
ahora llamamos a las funciones en orden obtenemos las respuestas y retornamos hacia la sigueinte funcion.
MIREN QUE HAY 2 PESTAÑAS EN DONDE SE ESCRIBE EL CÓDIGO, PARA QUE LE ENTIENDAN AL DESAFIO.
No les vaya a pasar como a mi que me queria arrancar el cabello del estrés por no entender que pedía este reto JAJA.
Aquí mi solución después de intentar quitarme la v1da:
tasks,js con sus funciones convertidos a Promise's
export function doTask1() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 1'), 300); }) } export function doTask2() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 2'), 300); }) } export function doTask3() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 3'), 300); }) }
Excercise.js leyendo las promesas y validando los resolves que retornan:
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1() .then(result1 => { strings.push(result1); return doTask2() }).then(result1 => { strings.push(result1); return doTask3() }).then(result1 => { strings.push(result1); return strings; }); }
gracias por el dato de las dos pestañas.
Probando cositas XD
Probando un metodo de las promesas
// task.js File export async function doTask1() { return new Promise((resolve) => { window.setTimeout(() => resolve("Task 1"), 300); }); } export async function doTask2() { return new Promise((resolve) => { window.setTimeout(() => resolve("Task 2"), 300); }); } export async function doTask3() { return new Promise((resolve) => { window.setTimeout(() => resolve("Task 3"), 300); }); } // Excercise import { doTask1, doTask2, doTask3 } from "./tasks"; export function runCode() { return Promise.all([doTask1(), doTask2(), doTask3()]) .then((values) => { return values; }) .catch((error) => { console.log(error); }); }
Muy interesante su solucion.
Primero que nada, noten que en este ejercicio hay dos archivos, por si les pasa como a mí que no entendía qué hacia doTask1,doTask2 y doTask3 hasta que encontré el archivo
Spoiler
Spoiler
Spoiler
Spoiler
Spoiler
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1() .then(function (rta1) { //Agrego la respuesta1 a strings y llamo a doTask2 strings.push(rta1); return doTask2(); }) .then(function (rta2) { //Agrego la respuesta2 a strings y llamo a doTask3 strings.push(rta2); return doTask3(); }) .then(function (rta3) { //Agrego la respuesta3 a strings y retorno strings strings.push(rta3); return strings; }) }
tasks.js
export function doTask1() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 1'), 300); }) } export function doTask2() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 2'), 300); }) } export function doTask3() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 3'), 300); }) }
No tengo ni la mas remota idea de que hacer...
¡Hola, Diego!
¿Qué es lo que te causa conflicto para resolver este ejercicio?
Hola Diego, Te aconsejo que veas el problema paso a paso. Puedes empezar con lo más sencillo que será coger el archivo tasks.js y convertir estos callbacks a promesas. (Mira la estructura de como se realiza una promise, que hace el callback y como lo puedes cambiar, esperando el mismo resultado). Luego en el archivo principal, transformas el callback hell a un Encadenamiento de promesas, pero como haces esto dirás, te paso este enlace: https://es.javascript.info/promise-chaining. Ve poco a poco, muchas veces la respuesta no dará ni siquiera en el quinto intento, Pero podrás hacerlo con paciencia y verás que lo lograrás. A mi también me ayuda, ver código de los otros compañeros y entenderlo. Un poco tarde la respuesta, pero si no te sirve a ti ojalá le sirva a otros.
Hice el cambio en el archivo tasks.js y me aceptó las pruebas 😅
Mi solución con promise all: 🤔
🟢 🟢 🟢 🟢 🟢 🟢 🟢
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const tasksPromises = [doTask1(), doTask2(), doTask3()]; return new Promise((resolve) => { Promise.all(tasksPromises) .then(tasks => resolve(tasks)) }) }
Esto es un escudo anti-Spoiler . . . . … . . . … En mi opinión falto redactar un poco mejor las instrucciones, luego todo bien. Deben fijarse que hay un archivo tasks.js el cual pueden consultar. Inicialmente le preste mucha atención al exercise.js y no note hasta muy tarde el porque mi código estaba fallando. En fin suerte a todos 😃
NO MIRES ESO AMIGO
PERO SI INSISTES
function runCode() { const strings = []; return new Promise((resolve) => { /* doTask1((rta1) => { strings.push(rta1); doTask2((rta2) => { strings.push(rta2); doTask3((rta3) => { strings.push(rta3); resolve(strings); }) }) }) */ doTask1() .then(response => { strings.push(response) return doTask2(); //llama a la siguiente promesa para que se ejecute }) .then(response => { //response hace referencia al valor de respuesta de la promesa doTask2() strings.push(response) return doTask3(); //llama a la siguiente promesa para que se ejecute }) .then(response => { //response hace referencia al valor de respuesta de la promesa doTask3() strings.push(response) return resolve(strings) //retorna el arreglo de strings }) }) }
My solution 👇
tasks.js:
export function doTask1() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 1'), 300); }); } export function doTask2() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 2'), 300); }); } export function doTask3() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 3'), 300); }); } ```**exercise.js:** ```js import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1() .then(rta1 => { strings.push(rta1); return doTask2(); }) .then(rta2 => { strings.push(rta2); return doTask3(); }) .then(rta3 => { strings.push(rta3); return strings; }); }
Solución! :D
🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️
Callback hell
!Spoiler Shield
function doTask1() { return new Promise((resolve) => { setTimeout(() => resolve("Task 1"), 300); }); } function doTask2() { return new Promise((resolve) => { setTimeout(() => resolve("Task 2"), 300); }); } function doTask3() { return new Promise((resolve) => { setTimeout(() => resolve("Task 3"), 300); }); }
export function runCode() { const strings = []; return new Promise((resolve) => { doTask1() .then((result) => { strings.push(result); return doTask2(); }) .then((result) => { strings.push(result); return doTask3(); }) .then((result) => { strings.push(result); resolve(strings); }); }); }
tasks.js
export function doTask1(callback) { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 1'), 300); }); } export function doTask2(callback) { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 2'), 300); }); } export function doTask3(callback) { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 3'), 300); }); }
excercise,js
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1().then(res => { strings.push(res); return doTask2(); }).then(res2 => { strings.push(res2); return doTask3(); }).then(res3 => { strings.push(res3); return strings; }) }
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1() .then(rta => { strings.push(rta); return doTask2(); }) .then(rta => { strings.push(rta); return doTask3(); }) .then(rta => { strings.push(rta); return strings; }) }
tasks.js
export function doTask1() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 1'), 300); }) } export function doTask2() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 2'), 300); }) } export function doTask3() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 3'), 300); }) }
part1
export function doTask1() { return new Promise((resolve, reject) => { window.setTimeout(() => { resolve('Task 1'); }, 300); }); } export function doTask2() { return new Promise((resolve, reject) => { window.setTimeout(() => { resolve('Task 2'); }, 300); }); } export function doTask3() { return new Promise((resolve, reject) => { window.setTimeout(() => { resolve('Task 3'); }, 300); }); }
part2
export function runCode() { const strings = []; return doTask1() .then(data1 => { strings.push(data1); return doTask2(); }) .then(data2 => { strings.push(data2); return doTask3(); }) .then(data3 => { strings.push(data3); return strings; }) }
Comparto mi solución:
. . , . .
. . , . .
tasks.js
export function doTask1() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 1'), 300); }); } export function doTask2() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 2'), 300); }); } export function doTask3() { return new Promise((resolve) => { window.setTimeout(() => resolve('Task 3'), 300); }); }
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1().then(rta1 => { strings.push(rta1); return doTask2(); }).then(rta2 => { strings.push(rta2); return doTask3(); }).then(rta3 => { strings.push(rta3); return strings; }); }
Mi solución:
Archivo exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export function runCode() { const strings = []; return doTask1().then(result1 => { strings.push(result1); return doTask2(result1); }) .then(result2 => { strings.push(result2); return doTask3(result2); }) .then(result3 => { strings.push(result3); return strings; }) }
Archivo task.js
export function doTask1(callback) { return new Promise((resolve) => { window.setTimeout(resolve('Task 1'), 300); }) } export function doTask2(callback) { return new Promise((resolve) => { window.setTimeout(resolve('Task 2'), 300); }) } export function doTask3(callback) { return new Promise((resolve) => { window.setTimeout(resolve('Task 3'), 300); }) }
👾 Mi solución
🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧 🚧
tasks.js
export function doTask1() { return new Promise((resolve, reject) => { window.setTimeout(() => resolve("Task 1"), 300); }); } export function doTask2() { return new Promise((resolve, reject) => { window.setTimeout(() => resolve("Task 2"), 300); }); } export function doTask3() { return new Promise((resolve, reject) => { window.setTimeout(() => resolve("Task 3"), 300); }); }
exercise.js
export function runCode() { const strings = []; return doTask1() .then((response) => { strings.push(response); return doTask2(); }) .then((response) => { strings.push(response); return doTask3(); }) .then((response) => { strings.push(response); return strings; }); }
import { doTask1, doTask2, doTask3 } from './tasks'; export const runCode = () => { const strings = []; return new Promise((resolve) => { doTask1() .then(rta1 => { strings.push(rta1); return doTask2() }) .then(rta2 => { strings.push(rta2); return doTask3() }) .then(rta3 => { strings.push(rta3); console.log(strings); resolve(strings); }) }) }
export const doTask1 = () => new Promise(resolve => window.setTimeout(() => resolve('Task 1'), 300)); export const doTask2 = () => new Promise(resolve => window.setTimeout(() => resolve('Task 2'), 300)); export const doTask3 = () => new Promise(resolve => window.setTimeout(() => resolve('Task 3'), 300));
Hola Comparto mi solución al Reto:
🚗 🚓 🚕 🛺 🚙 🚌 🚐 🚎 🚑 🚒 🚚 🚛
tasks.js
export function doTask1() { return new Promise((resolve) => { window.setTimeout(() => resolve("Task 1"), 300); }); } export function doTask2() { return new Promise((resolve) => { window.setTimeout(() => resolve("Task 2"), 300); }); } export function doTask3() { return new Promise((resolve) => { window.setTimeout(() => resolve("Task 3"), 300); }); }
exercise.js
import { doTask1, doTask2, doTask3 } from "./tasks"; export function runCode() { const strings = []; return new Promise((resolve) => { doTask1() .then((rta1) => { strings.push(rta1); return doTask2(); }) .then((rta2) => { strings.push(rta2); return doTask3(); }) .then((rta3) => { strings.push(rta3); resolve(strings); }); }); }