Playground - Resuelve el callback hell usando async/await
Clase 38 de 99 • 30 días de JavaScript
Contenido del curso
Pablo Pincay Alvarez
student•
hace 3 años
Juan Camilo Noreña López
student•
hace 3 años
Clase 38 de 99 • 30 días de JavaScript
Contenido del curso
Pablo Pincay Alvarez
Juan Camilo Noreña López
Santiago Quintero
Gilberto Espinoza Maciel
Agustin Choque Veliz
Pablo Perez
David Ochoa
Daniel Sebastián Rodríguez
Gustavo Alonso Aguilar Acuña
Brayan Ruiz
Ricardo Alfonso Chavez Vilcapoma
Andrés Soret Chacin
Ricardo Alfonso Chavez Vilcapoma
Julio Bastidas
Manuel Alexander Montañez Gordillo
Juan Camilo Noreña López
Carina Payleman
Alexis Corrales
Christian Ricardo Conchari Cabrera
Pariksit Erikrsnan Ortiz Flores
Alejandro Anaya
Julian Roa Villamil
Hiver Tapia
. . ---------------------------------- . 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); }) }