Playground - Resuelve el callback hell usando async/await

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

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

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

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

👾 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 async function runCode() {
  return [await doTask1(), await doTask2(), await doTask3()]
}

import { doTask1, doTask2, doTask3 } from './tasks';

export const runCode = async () => [
  await doTask1(),
  await doTask2(),
  await doTask3()
];

export const doTask1 = async () => new Promise(resolve => window.setTimeout(() => resolve('Task 1'), 300));

export const doTask2 = async () => new Promise(resolve => window.setTimeout(() => resolve('Task 2'), 300));

export const doTask3 = async () => new Promise(resolve => window.setTimeout(() => resolve('Task 3'), 300));

Hola La Solución del Reto en :
🔟
9️⃣
8️⃣
7️⃣
6️⃣
5️⃣
4️⃣
3️⃣
2️⃣
1️⃣
0️⃣

exercise.js

import { doTask1, doTask2, doTask3 } from "./tasks";

export function runCode() {
  const strings = [];
  return new Promise(async (resolve) => {
    let rta = await doTask1();
    strings.push(rta);
    rta = await doTask2();
    strings.push(rta);
    rta = await doTask3();
    strings.push(rta);

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

éxito total estas dinámicas. se puede decir que concepto aprendido

Después de entender este ejercicio, no acabo de comprender porque mi cerebro tiene tanto problema para procesar el funcionamiento de algo tan sencillo ¿quizá resistencia por años de programación en la que las funciones no volaban en forma de variables hacia todas partes? , sigamos! 😃

Bueno, no se si fue por vagancia, pero sólo modifique el código anterior y lo adapté para async/await… espero que les guste… 😃

Exercise.js

async function runCode() {
  const strings = [];

  return await new Promise((resolve) => {
    doTask1(arg => strings.push(arg))
      .then(data => doTask2(arg2 => strings.push(arg2)))
      .then(data => doTask3(arg3 => strings.push(arg3)))
      .then(data => resolve(strings));
    ;

  })
}

Tasks.js

async function doTask1(callback) {

  return await new Promise((resolve) => {
    window.setTimeout(() => { resolve(callback('Task 1')) }, 300);
  });
}

export async function doTask2(callback) {
  return await new Promise((resolve) => {
    window.setTimeout(() => { resolve(callback('Task 2')) }, 300);
  });
}

export async function doTask3(callback) {
  return await new Promise((resolve) => {
    window.setTimeout(() => { resolve(callback('Task 3')) }, 300);
  });
}

Solución

async function runCode() {
	const strings = []
  const str1 = await doTask1()
  const str2 = await doTask2()
  const str3 = await doTask3()
  strings.push(str1)
  strings.push(str2)
  strings.push(str3)
  console.log(strings)
  return strings
}

…
…
…
…
…
…
…
…
…
…
…
…
…
…
…

export function  runCode() {
  const strings = [];
  return new Promise( async (resolve) => {
    const rta1 = await doTask1((rta1) => rta1);
    const rta2 = await doTask2((rta2) => rta2);
    const rta3 = await doTask3((rta3) => rta3);
    strings.push(rta1, rta2, rta3);
    resolve(strings);
   
  })
}

Otro mas y seguimos
.
.
.
.
.
.
.
.
.
.
.
.
.
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);
  })
}

Comparto mi solución
.
.
.
.
.
.
.
.
.
.
.
.

import { doTask1, doTask2, doTask3 } from './tasks';

export async function runCode() {
  const strings = [];
  strings.push(...await Promise.all([doTask1(), doTask2(),doTask3()]))
  return strings;
}

exercise.js

tasks.js

Fue más sencillo que en el anterior

Se nota la ventaja de usar async/await

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 function doTask3() {
  return new Promise((resolve) => {
    window.setTimeout(() => resolve('Task 3'), 300);
  });
}

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

MI SOLUCION 💪
Definitivamente es mucho mas legible
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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)
  );
}

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

Mi solución compañeros:
.
.
.
.
.
.
.
.
.

import { doTask1, doTask2, doTask3 } from './tasks';

export function runCode() {
  const strings = [];
  return new Promise(async (resolve) => {
    try {  
      strings.push(await doTask1())
      strings.push(await doTask2())
      strings.push(await doTask3())
      resolve(strings)
      
    } catch (error) {
      console.log(error.message)
    }
  })
}

y por último el archivo tas.js

export function doTask1() {
  return new Promise(resolve => {
    window.setTimeout(resolve('Task 1'), 400);
  })
}

export function doTask2() {
  return new Promise((resolve) => {
    window.setTimeout(resolve('Task 2'), 600);
  })
}

export function doTask3() {
  return new Promise((resolve) => {
    window.setTimeout(resolve('Task 3'), 300);
  })
}

Solución… 😄
.
Para resolver el reto, el archivo tasks.js será el mismo que el del anterior.
.
Mientras que en exercise.js añadimos async a la función runCode(), creamos un array de tareas ‘strings’ y mediante await obtenemos las tareas y las añadimos al array. Retornamos ‘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 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);
  });
}

Solución

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

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

Adjunto mi respuesta.
En el archivo exercise.js usando await, ya no se tiene que usar el callback then, así podemos obtener el resultado de las promesas en la misma línea porque pausa la ejecución y obtiene el resultado de la promesa directamente.

import { doTask1, doTask2, doTask3 } from './tasks';

export  function runCode() {
  const strings = [];

  async function returnTasks() {
    let str1 = await doTask1();
    let str2 = await doTask2();
    let str3 = await doTask3();
    return [str1, str2, str3];
  }
return returnTasks();
}

En el archivo tasks es lo mismo que en el ejercicio pasado que fue cambiar los callbacks por promesas.

Menos mal que pusieron async/await

Solucion:
.
.
.
.
.
.
.
.
.
.
.
.
.
exercise.js

import { doTask1, doTask2, doTask3 } from './tasks';

export async function runCode() {
  const strings = [];
  let rta1 = await doTask1();
  let rta2 = await doTask2();
  let rta3 = await doTask3();

  strings.push(rta1, rta2, rta3);
  return strings;
}

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

Hola, dejo mi solucion
Caminito anti spoilers
🚗
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Llegamos 📍

Task.js

export function doTask1(callback) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve('Task 1')
    }, 300)
  })
}

export function doTask2(callback) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve('Task 2')
    }, 300)
  })
}

export function doTask3(callback) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve('Task 3')
    }, 300)
  })
}

exercise.js

import { doTask1, doTask2, doTask3 } from './tasks';

export async function runCode() {
  const strings = [];
  let result1 = await doTask1();
  strings.push(result1);
  let result2 = await doTask2();
  strings.push(result2);
  let result3 = await doTask3();
  strings.push(result3);
  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);
  })
}