Playground - Resuelve el callback hell usando async/await

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

Playground - Resuelve el callback hell usando async/await

¡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