Contenido del curso
Playground - Resuelve el callback hell usando async/await
Pablo Pincay Alvarez
Estudiante
Juan Camilo Noreña López
Estudiante
Santiago Quintero
Estudiante
Gilberto Espinoza Maciel
Estudiante
Agustin Choque Veliz
Estudiante
Pablo Perez
Estudiante
David Ochoa
Estudiante
Daniel Sebastián Rodríguez
Estudiante
Gustavo Alonso Aguilar Acuña
Estudiante
Brayan Ruiz
Estudiante
Ricardo Alfonso Chavez Vilcapoma
Estudiante
Andrés Soret Chacin
EstudianteRicardo Alfonso Chavez Vilcapoma
Estudiante
Julio Bastidas
Estudiante
Manuel Alexander Montañez Gordillo
EstudianteJuan Camilo Noreña López
Estudiante
Carina Payleman
Estudiante
Alexis Corrales
Estudiante
Christian Ricardo Conchari Cabrera
Estudiante
Pariksit Erikrsnan Ortiz Flores
Estudiante
Alejandro Anaya
Estudiante
Julian Roa Villamil
Estudiante
Hiver Tapia
Estudiante. . ---------------------------------- . ESCUDO ANTI SPOILER . ---------------------------------- . . . . . . . . . . . . . . . . .
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { return [await doTask1(), await doTask2(), await doTask3()] }
y en tasks,js es el mismo que el anterior
Denle like a esta solución ya que el primer aporte es un spoiler
MI solución:
export async function runCode() { const strings = []; strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings; }
task.js
export async function doTask1(callback) { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 1'), 300) }) } export async function doTask2(callback) { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 2'), 300) }) } export async function doTask3(callback) { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 3'), 300) }) }
Llegué a lo mismo, es increíble lo que que se me dificultó entender el ejercicio anterior y ahora es tan claro.
Sí que tienen razón, este modo de trabajar es mas legible. las doTasks no cambiaron en relación al anterior reto.
<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); }); }>
Y este el código del runCode(), mucho mas legible y corto.
<import { doTask1, doTask2, doTask3 } from './tasks'; exportasync function runCode() { const strings = []; const rta1 = await doTask1(); strings.push(rta1); const rta2 = await doTask2(); strings.push(rta2); const rta3 = await doTask3(); strings.push(rta3); return strings; }>
Mi solución usando Promise.allSettled:
// exercise.js import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { return Promise.allSettled([doTask1(), doTask2(), doTask3()]) .then(listOfObjects => listOfObjects.map(element => element.value)) }
// tasks.js export async function doTask1() { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 1'), 300); }) } export async function doTask2() { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 2'), 300); }) } export async function doTask3() { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 3'), 300); }) }
🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️
Callback hell usando async-await
!Spoiler Shield
tasks.js
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); }); }
exercise.js
export async function runCode() { const strings = []; const res1 = await doTask1(); const res2 = await doTask2(); const res3 = await doTask3(); strings.push(res1); strings.push(res2); strings.push(res3); return strings; }
Aporto mi solución
Spoiler
Spoiler
Spoiler
Spoiler
Spoiler
Spoiler
Spoiler
Spoiler
Spoiler
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const strings = [await doTask1(), await doTask2(), await doTask3()]; return await 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); }) }
Lo logré! sin duda es mas intuitivo que el .then . . . . . . . . . ..
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { //le agrego el async porque ellos usan await const strings = []; async function paso() { //creo una funcion para que sea asincronica const string1 = await doTask1(); //espero que se haga y push strings.push(string1); strings.push(await doTask2()); //push pero cuando ya se hace strings.push(await doTask3()); return strings; //la funcion me retorna el string } let result = await paso(); //para darle valor a result se ejecuta paso() return result; //se retorna ese resultado }
task.js
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); }) }
Buenas buenas . La verdad efectivamente este tema se me hace algo complejo. No se si en alguno de los lives que faltan se podria explicar la solución?
amigo, yo tampoco entendía, así que me fui al curso de ASINCRONISMO CON JAVASCRIPT y pude resolver ambos playgrounds con facilidad.
My solution 👇
exercise.js:
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const rta1 = await doTask1(); const rta2 = await doTask2(); const rta3 = await doTask3(); const strings = [rta1, rta2, rta3]; return strings; }
HEY!!!
NO BAJES NO BAJES...SPOILER ALERT!!!
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); }) }
import { doTask1, doTask2, doTask3 } from './tasks'; export async 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); }) }) }) }) */ const task1 = await doTask1(); const task2 = await doTask2(); const task3 = await doTask3(); strings.push(task1); strings.push(task2); strings.push(task3); return strings; } runCode();
tasks.js
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); }); }
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const strings = []; strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings }
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const result1 = doTask1(); const result2 = doTask2(); const result3 = doTask3(); const [rta1, rta2, rta3] = await promise.all([result1, result2, result3]); strings.push(rta1); strings.push(rta2); strings.push(rta3); return strings; }
task-ks
<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); }); }>
Acá dejo mi solución: Pero primero el antispoiler . . . . . . . . . . . . . . . . . . . . . .
task.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 async function runCode() { const strings = []; const rta1 = await doTask1(); strings.push(rta1) const rta2 = await doTask2(); strings.push(rta2) const rta3 = await doTask3(); strings.push(rta3) return strings; }
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const strings = []; strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings; }
tasks.js
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); }) }
part 1
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); }); }
part 2
export async function runCode() { const strings = []; try { strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings; } catch (error) { console.error(error); } }
Comparto mi solución:
. . . . .
. . . . .
tasks.js
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); }); }
exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const strings = []; strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings; }
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const strings = []; strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings; }
🛡️🛡️Escudo anti-spoilers🛡️🛡️
Mi solución al reto:
Archivo: exercise.js
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const strings = []; strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings; }
Archivo: tasks.js
// File: tasks.js export async function doTask1(callback) { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 1'), 300) }) } export async function doTask2(callback) { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 2'), 300) }) } export async function doTask3(callback) { return new Promise((resolve, reject) => { window.setTimeout(() => resolve('Task 3'), 300) }) }
mi solución: 🫡 🫡 🫡 🫡 🫡 🫡 🫡 🫡 🫡
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { const strings = []; strings.push(await doTask1()); strings.push(await doTask2()); strings.push(await doTask3()); return strings; }
export function doTask1() { return new Promise(resolve => { window.setTimeout(() => resolve('Task 1'), 300); }) //window.setTimeout(() => callback('Task 1'), 300); } export function doTask2(callback) { return new Promise(resolve => { window.setTimeout(() => resolve('Task 2'), 300); }) //window.setTimeout(() => callback('Task 2'), 300); } export function doTask3(callback) { return new Promise(resolve => { window.setTimeout(() => resolve('Task 3'), 300); }) //window.setTimeout(() => callback('Task 3'), 300); }
¿Qué problema habría de ésta forma?
import { doTask1, doTask2, doTask3 } from './tasks'; export async function runCode() { return await Promise.all([doTask1(), doTask2(), doTask3()]); }
el archivo task.js
export function doTask1() { return new Promise((resolve)=>{ setTimeout(() => resolve('Task 1'), 300); }) } export function doTask2() { return new Promise((resolve)=>{ setTimeout(() => resolve('Task 2'), 300); }) } export function doTask3() { return new Promise((resolve)=>{ setTimeout(() => resolve('Task 3'), 300); }) }
