Playground - Resuelve el callback hell usando async/await

Cursos Empresas Blog Live Conf Precios

Contenido del curso

¡Te damos la bienvenida a este reto!

1
¡Bienvenido al mundo de JavaScript!
01:33 min

Día 1

Día 2

Día 3

Día 4

Día 5 - Checkpoint

20
Playground - encuentra el palindromo más grande

Día 6

Día 7

Día 8

Día 9

Día 10 - Checkpoint

Día 11

Día 12

Día 13

Día 14

Día 15 - Checkpoint

50
Playground - Sistema de reservaciones de un hotel

Día 16

Día 17

Día 18

Día 19

Día 20 - Checkpoint

65
Playground - Agenda de vuelos

Día 21

Día 22

Día 23

Día 24 - Checkpoint

77
Playground - Crea un task manager con patrones de diseño

Día 25

Día 26

Día 27

Día 28

Día 29

Día 30

93
¡Lo lograste!
01:41 min

Live Class

Tomar examen

Playground - Resuelve el callback hell usando async/await

Comentarios

Pablo Pincay Alvarez

student

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

Juan Camilo Noreña López

student

Denle like a esta solución ya que el primer aporte es un spoiler

Santiago Quintero

student

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

Gilberto Espinoza Maciel

student

Llegué a lo mismo, es increíble lo que que se me dificultó entender el ejercicio anterior y ahora es tan claro.

Agustin Choque Veliz

student

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

Pablo Perez

student

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

David Ochoa

student

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

Daniel Sebastián Rodríguez

student

Aporto mi solución

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

Gustavo Alonso Aguilar Acuña

student

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

Brayan Ruiz

student

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?

Ricardo Alfonso Chavez Vilcapoma

student

amigo, yo tampoco entendía, así que me fui al curso de ASINCRONISMO CON JAVASCRIPT y pude resolver ambos playgrounds con facilidad.

Andrés Soret Chacin

student

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

Ricardo Alfonso Chavez Vilcapoma

student

HEY!!!

NO BAJES NO BAJES...SPOILER ALERT!!!

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 = [];
  /* 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();

Julio Bastidas

student

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
}

Manuel Alexander Montañez Gordillo

student

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

Juan Camilo Noreña López

student

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;

}

Carina Payleman

student

. . . . . .

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

Alexis Corrales

student

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

Christian Ricardo Conchari Cabrera

student

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

Pariksit Erikrsnan Ortiz Flores

student

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

Alejandro Anaya

student

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

Julian Roa Villamil

student

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

Hiver Tapia

student

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

¡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