Playground - Resuelve el callback hell usando promesas

.
. -----------------------------------------
. ESCUDO ANTI SPOILER
. -----------------------------------------
.
. Este reto si que me hizo sudar.
.
.

.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

pues bien hay que modificar los dos archivos, no sean como yo que pensaba que solo era uno.

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

solo le agregamos la promesa y el resolve

exercise.js

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

export function runCode() {
  const strings = [];
  return doTask1()
    .then(res => {
      strings.push(res)
      return doTask2();
    })
    .then(res => {
      strings.push(res)
      return doTask3();
    })
    .then(res => {
      strings.push(res)
      return strings
    })
    .catch(error => {
      console.log(error)
    });
}

ahora llamamos a las funciones en orden obtenemos las respuestas y retornamos hacia la sigueinte funcion.

MIREN QUE HAY 2 PESTAÑAS EN DONDE SE ESCRIBE EL CÓDIGO, PARA QUE LE ENTIENDAN AL DESAFIO.

No les vaya a pasar como a mi que me queria arrancar el cabello del estrés por no entender que pedía este reto JAJA.

Aquí mi solución después de intentar quitarme la v1da:

tasks,js con sus funciones convertidos a Promise’s

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

Excercise.js leyendo las promesas y validando los resolves que retornan:

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

export function runCode() {
  const strings = [];
  return doTask1()
    .then(result1 => {
      strings.push(result1);
      return doTask2()
    }).then(result1 => {
      strings.push(result1);
      return doTask3()
    }).then(result1 => {
      strings.push(result1);
      return strings;
    });
}

Probando cositas XD

Probando un metodo de las promesas Promise.all()

// task.js File

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

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

export function runCode() {
  return Promise.all([doTask1(), doTask2(), doTask3()])
    .then((values) => {
      return values;
    })
    .catch((error) => {
      console.log(error);
    });
}

Primero que nada, noten que en este ejercicio hay dos archivos, por si les pasa como a mí que no entendía qué hacia doTask1,doTask2 y doTask3 hasta que encontré el archivo

Spoiler

Spoiler

Spoiler

Spoiler

Spoiler

exercise.js

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

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

  return doTask1()
    .then(function (rta1) {
      //Agrego la respuesta1 a strings y llamo a doTask2
      strings.push(rta1);
      return doTask2();
  })
    .then(function (rta2) {
      //Agrego la respuesta2 a strings y llamo a doTask3
      strings.push(rta2);
      return doTask3();
    })
    .then(function (rta3) {
      //Agrego la respuesta3 a strings y retorno strings
      strings.push(rta3);
      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);
  })
}

No tengo ni la mas remota idea de que hacer…

Hice el cambio en el archivo tasks.js y me aceptó las pruebas 😅

Mi solución con promise all: 🤔

🟢
🟢
🟢
🟢
🟢
🟢
🟢

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

export function runCode() {
  const tasksPromises = [doTask1(), doTask2(), doTask3()];
  return new Promise((resolve) => {
    Promise.all(tasksPromises)
      .then(tasks => resolve(tasks))
  })
}

Esto es un escudo anti-Spoiler
.
.
.
.
…
.
.
.
…
En mi opinión falto redactar un poco mejor las instrucciones, luego todo bien. Deben fijarse que hay un archivo tasks.js el cual pueden consultar. Inicialmente le preste mucha atención al exercise.js y no note hasta muy tarde el porque mi código estaba fallando. En fin suerte a todos 😃

NO MIRES ESO AMIGO

PERO SI INSISTES

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);
                })
            })
        }) */
        doTask1()
            .then(response => {
                strings.push(response)
                return doTask2(); //llama a la siguiente promesa para que se ejecute
            })
            .then(response => { //response hace referencia al valor de respuesta de la promesa doTask2()
                strings.push(response)
                return doTask3(); //llama a la siguiente promesa para que se ejecute
            })
            .then(response => { //response hace referencia al valor de respuesta de la promesa doTask3()
                strings.push(response)
                return resolve(strings) //retorna el arreglo de strings
            })
    })
}

Solución! 😄

🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️

Callback hell

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

export function runCode() {
  const strings = [];
  return new Promise((resolve) => {
    doTask1()
      .then((result) => {
        strings.push(result);
        return doTask2();
      })
      .then((result) => {
        strings.push(result);
        return doTask3();
      })
      .then((result) => {
        strings.push(result);
        resolve(strings);
      });
  });
}

tasks.js

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

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

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

excercise,js

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

export function runCode() {
  const strings = [];
  return doTask1().then(res => {
    strings.push(res);
    return doTask2();
  }).then(res2 => {
    strings.push(res2);
    return doTask3();
  }).then(res3 => {
    strings.push(res3);
    return strings;
  })
}

.
.
.
.
.
.

exercise.js

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

export function runCode() {
    const strings = [];
    return doTask1()
      .then(rta => {
        strings.push(rta);
        return doTask2();
      })
      .then(rta => {
        strings.push(rta);
        return doTask3();
      })
      .then(rta => {
        strings.push(rta);
        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);
    })
}

part1

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

part2

export function runCode() {
  const strings = [];
  return doTask1()
    .then(data1 => {
      strings.push(data1);
      return doTask2();
    })
    .then(data2 => {
      strings.push(data2);
      return doTask3();
    })
    .then(data3 => {
      strings.push(data3);
      return strings;
    })
}

Comparto mi solución:

.
.
,
.
.

.
.
,
.
.

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

exercise.js

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

export function runCode() {
  const strings = [];
  return doTask1().then(rta1 => {
    strings.push(rta1);
    return doTask2();
  }).then(rta2 => {
    strings.push(rta2);
    return doTask3();
  }).then(rta3 => {
    strings.push(rta3);
    return strings;
  });
}

Mi solución:

Archivo exercise.js

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

export function runCode() {
  const strings = [];
  return doTask1().then(result1 => {
    strings.push(result1);
    return doTask2(result1);
  })
    .then(result2 => {
      strings.push(result2);
      return doTask3(result2);

    })
    .then(result3 => {
      strings.push(result3);
      return strings;
    })
}

Archivo task.js

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

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

export function doTask3(callback) {
  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 function runCode() {
  const strings = [];
  return doTask1()
    .then((response) => {
      strings.push(response);
      return doTask2();
    })
    .then((response) => {
      strings.push(response);
      return doTask3();
    })
    .then((response) => {
      strings.push(response);
      return strings;
    });
}

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

export const runCode = () => {
  const strings = [];
  return new Promise((resolve) => {
    doTask1()
      .then(rta1 => { 
        strings.push(rta1);
        return doTask2() 
      })
      .then(rta2 => {
        strings.push(rta2);
        return doTask3()
      })
      .then(rta3 => {
        strings.push(rta3);
        console.log(strings);
        resolve(strings);
      })
  })
}

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

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

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

Hola Comparto mi solución al Reto:

🚗
🚓
🚕
🛺
🚙
🚌
🚐
🚎
🚑
🚒
🚚
🚛

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

exercise.js

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

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

Hi,people.
Iniciamos refactorizando las funciones callback, a promesas, Una a una :
Seguidamente refactorizamos el código del ejercicio, retornando cada una de las promesas, y seguidamente llamando su resolve, con el .then(), dentro de este then viene la rest1, la pasamos como argumento y en el cuerpo { empujamos} la respuesta al string con el .push. y seguidamente retornamos la siguiente promesa o doTask2 y volvemos a hacer lo mismo, En el ultimo .then(), retornamos el string completo.

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

        }

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

        }

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

        }

        function runCode() {
            const strings = [];
            return doTask1()
                .then((rest1) => {
                    strings.push(rest1);
                    return doTask2();
                })
                .then((rest2) => {
                    strings.push(rest2);
                    return doTask3();
                })
                .then((rest3) => {
                    strings.push(rest3);
                    return strings;
                }) 

.
solucion
.

task.js

const doTaskSync = ((task) => {
  return new Promise((resolve) =>
    window.setTimeout(() => resolve(task), 300)
  )
})

export function doTask1() {
  return doTaskSync('Task 1')
}

export function doTask2() {
  return doTaskSync('Task 2')
}

export function doTask3() {
  return doTaskSync('Task 3')
}

exercise.js

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

export function runCode() {
  const strings = [];
  return doTask1()
    .then((rta1) => {
      strings.push(rta1);
      return doTask2()
    })
    .then((rta2) => {
      strings.push(rta2);
      return doTask3()
    })
    .then((rta3) => {
      strings.push(rta3);
      return strings
    })
}

¡Hola!

Mi solución,
Se detalla hasta abajo.⬇
⬇
⬇
⬇
⬇
⬇
⬇
⬇
⬇
⬇
⬇
⬇
exercise.js

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

export function runCode() {
  const strings = [];
  return  doTask1()
    .then(result1 => {
      strings.push(result1);
      return  doTask2(result1);
    })
    .then(result2 => {
      strings.push(result2);
      return  doTask3(result2);
    })
    .then(result3 => {
      strings.push(result3);
      return strings;
    });

}

task.js

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

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

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

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
asi lo resolvi:

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

export function runCode() {
const strings = [];
return doTask1().then(r => { console.log®; strings.push®; return doTask2()})
.then(r => { console.log®; strings.push®; return doTask3() })
.then(r => { console.log®; strings.push®; console.log(strings); return strings})
//doTask2().then(r => strings.push®);
//doTask3().then(r => strings.push®);

}

con las clases, la ayuda de la comunidad mas prueba y error en la plataforma poco a poco se va interiorizando estos conceptos. son un poco contra intuitivos

⚠ Cuidado Spoiler ⚠
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*

*
*
No se si el uso del método Promise.all() estaba permitido, pero estoy intentando resolver los retos únicamente basándome en lo sé de JS. Dejo el gist con mi respuesta al reto

🛡️Escudo anti-spoilers🛡️
.
.

“Mi solución”, basada en las soluciones de la comunidad, este tema es nuevo para mi 😃 Happy to learn!!

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

Hola. Muy buen reto este!. Puso a loquear un rato jaja. Chévere el aumento de dificultad que están poniendo
.
.
.
Comparto mi solución
.
.
.
.
Por ahora lo entiendo así: .then() es un manejador de ‘outcomes’ que funciona si la función anterior de la cadena (el primer doTask() u otro then()) retorna un objeto tipo Promesa. Así se siente obligado a esperar. Si la función anterior no tiene return; el then() coge un ‘undefined’ como la siguiente response y sigue derecho.
.
Entonces al doTask1() le concateno un then() que espera el return de la Promise dentro de la definición de doTask1(). Esto se le alimenta al then(), ejecuta el push, para luego ejecutar y retornar la otra Promesa. Este ciclo se repite para los demás. La diferencia está en que el último then() no retorna para otro then() sino para la Promise principal, y le pasa el strings[] como resolve()

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

export function runCode() {
  const strings = [];
  return new Promise((resolve) => {
    doTask1().then(response => {
      strings.push(response);
      return doTask2();
    })
    .then(response => {
      strings.push(response);
      return doTask3();
    })
    .then(response => {
      strings.push(response)
    })
    .then(() => { return resolve(strings) })
  })
}

Envolver el setTimeout() en una promesa es insertarlo como cuerpo de la función ‘prometida’ en la Promesa. Como es una sola línea, el return es automático. Sí toca hacerle return a la promesa como tal para que pueda ser manejada por un then() posterior.

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

Poco código pero te puedes enredar… 😃

Tasks.js

export  function doTask1(callback) {

  return new Promise((resolve)=>{
    setTimeout(() => {resolve(callback('Task 1'))}, 300);
  });
  }
  
  export function doTask2(callback) {
    return new Promise((resolve)=>{
      setTimeout(() => {resolve(callback('Task 2'))}, 300);
    });
  }
  
  export function doTask3(callback) {
    return new Promise((resolve)=>{
      setTimeout(() =>{ resolve(callback('Task 3'))}, 300);
    });
  }

exercise.js

function runCode() {
    const strings = [];

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

Solución

function doTask1() {
	return new Promise(resolve => {
  	window.setTimeout(() => resolve("Task 1"), 300)
  })
}

function doTask2() {
	return new Promise(resolve => {
  	window.setTimeout(() => resolve("Task 2"), 300)
  })
}

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


function runCode() {
  const strings = [];
  return new Promise((resolve) => {
  	doTask1()
    	.then(str => {
      	strings.push(str)
      })
    doTask2()
    	.then(str => {
      	strings.push(str)
      })
    doTask3()
    	.then(str => {
      	strings.push(str)
      	resolve(strings)
      })
  })
}

Tasks.js

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

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

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

Exercise.js

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

export function runCode() {
  const strings = [];
  return doTask1().
    then(result => {
      strings.push(result);
      return doTask2();
    })
    .then(result => {
      strings.push(result);
      return doTask3();
    })
    .then(result => {
      strings.push(result);
      return strings
    })
}

Segun vi, el truco esta en que el Promise se hace sobre el tasks.js y no sobre el exercise.js

Mi solución:
exercise.js

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

export function runCode() {
  const strings = [];
  return (
    doTask1()
      .then((rta1) => {
      strings.push(rta1);
      return doTask2()
      })
      .then((rta2) => {
        strings.push(rta2);
        return doTask3()
      })
      .then((rta3) => {
        strings.push(rta3);
         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);
  })
}

Respuesta al ejercicio, cuidado con los spoilers:
.
.
.
.
.
.
.
.
.
.
.
Al parecer me paso lo mismo que a mucha gente de los comentarios y es que trate de resolver el problema solo con exercise.js, ya después descubrí que también hay que resolver tasks.js

exercise.js:

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

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

tasks.js

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

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

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

Mi respuesta al ejercicio:
.
.
.
.
.
.
.
.
.
.
.
.
.

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

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

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

  return doTask1()
    .then(response => strings.push(response))
    .then(() => doTask2())
    .then(response => strings.push(response))
    .then(() => doTask3())
    .then(response => strings.push(response))
    .then(() => strings);
}

Ya estuvo, algo complicado, creo que me falta entender mucho más esto, pero es muy interesante y divertido

excercise.js

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

export function runCode() {
  const strings = [];
  return new Promise((resolve) => {
    doTask1()
      .then(rta1 => {
        strings.push(rta1);
        return doTask2();
      })
      .then(rta2 => {
        strings.push(rta2);
        return doTask3();
      })
      .then(rta3 => {
        strings.push(rta3);
        resolve(strings);
      })
      .catch(error => {
        console.log(error);
      });
  });
}

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

exercise.js

tasks.js

Sufri un poco porque no me di cuenta de la pestaña tasks.js, que se tenía que hacer cambios, para que funcione.
…
.
.
.
.
.
.
.
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);
  })
}

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

export function runCode() {
  const strings = [];
  return doTask1()
    .then(rta1 => {
      strings.push(rta1)
      return doTask2()
    })
    .then(rta2 => {
      strings.push(rta2)
      return doTask3()    
    })
    .then(rta3 => {
      strings.push(rta3)
      return strings
    })
  
}

vaya no pude a la primera, tube que spoilearme 😦

UUUUffffff, me hizo sufrir mas que la tóxica jajajaj, pero se pudo:

aquí las tasks.js convertidos a promesas:

<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 aquí en runCode:

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

export function runCode() {
  const strings = [];
  return doTask1()
    .then(rta1 => {
      strings.push(rta1);
      return doTask2();
    })
    .then(rta2 => {
      strings.push(rta2);
      return doTask3();
    })
    .then(rta3 => {
      strings.push(rta3);
      return strings;
    });
}> 

me encantó este reto.

MI SOLUCION 💪
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Me tomo un tiempo darme cuenta de que había un archivo tasks.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)
  });
}

Una vez modificado el archivo tasks.js el otro ya es mas sencillo es solo ponerlos then y retornar la siguiente tarea

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

export function runCode() {
  const strings = [];
  return doTask1()
    .then(responce1 => {
      strings.push(responce1);
      return doTask2();
    })
    .then(responce2 => {
      strings.push(responce2);
      return doTask3();
    })
    .then(responce3 => {
      strings.push(responce3);
      return strings;
    })
    .catch(err => console.error(err));
}

Solucion al reto
.
.
.
.
.
.
.
.
.
.
.
.

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

In exercise.js

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

export function runCode() {
  const strings = [];
  return new Promise((resolve) => {
    doTask1()
      .then(task1 => {
        strings.push(task1);
        return doTask2();
      })
      .then(task2 => {
        strings.push(task2);
        return doTask3();
      })
      .then(task3 => {
        strings.push(task3);
        resolve(strings)
      })
      .catch((err) => console.error(err));
  })
}

Para entender mejor los callback, aquí hay un ejemplo similar al ejercicio del reto:
.
tasks.js
.

export function sum(x, y, callback) {
  window.setTimeout(() => {
    const result = x + y;
    callback(result);
  }, 300);
}

export function multiply(x, y, callback) {
  window.setTimeout(() => {
    const result = x * y;
    callback(result);
  }, 300);
}

export function subtract(x, y, callback) {
  window.setTimeout(() => {
    const result = x - y;
    callback(result);
  }, 300);
}

.
excercise.js:
.

import { sum, multiply, subtract } from './tasks';

export function runCode() {
  return new Promise((resolve) => {
    sum(2, 3, (result) => {
      console.log('La suma de 2 y 3 es:', result);
      multiply(4, 5, (result) => {
        console.log('La multiplicación de 4 y 5 es:', result);
        subtract(10, 3, (result) => {
          console.log('La resta de 10 y 3 es:', result);
          resolve();
        });
      });
    });
  });
}

Solución… 😄
.
Me costó entenderlo…
.
Primero hay que analizar como funciona el código de runCode() original:
.

const strings = [];
  return new Promise((resolve) => {
    doTask1((rta1) => {
      strings.push(rta1);
      doTask2((rta2) => {
        strings.push(rta2);
        doTask3((rta3) => {
          strings.push(rta3);
          resolve(strings);
        })
      })
    })
  })

.
Se tiene al arreglo strings, que guardará los tasks correspondientes. Por lo que primero en el return, se crea una promesa y adentro se llama a la función doTask1, que es el siguiente:
.

export function doTask1(callback) {
  window.setTimeout(() => callback('Task 1'), 300);
}

.
En esta función lo que estamos pasando es una función llamada callback. Dentro de doTask1(callback) tenemos un setTimeout de 300 milisegundos.
.
Después de ese tiempo se realiza ‘callback(‘Task 1’)’; es decir, ‘Task 1’ será igual a ‘rta1’ en excercise.js:
.

 doTask1((rta1) => {
      strings.push(rta1);
      doTask2((rta2) => {  //etc.. 

.
Por lo que, podría entenderse como si fuera:
.

 doTask1((rta1) => { //rta1 = 'task 1'
      strings.push(rta1);
      doTask2((rta2) => {  //etc

.
Entonces estamos agregando ‘task 1’ al array de tareas ‘strings’, y luego hacemos el mismo proces con ‘doTask2’ y ‘doTask3’.
.
Este último resuelve el array de tareas mediante ‘resolve’.
.
Ya en la resolución del reto, convertimos las funciones del archivo tasks.js a promesas, como por ejemplo:
.

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

.
Luego en exercise, retornamos doTask1() anidado a los .then(). Esto porque la función then() se utiliza para manejar la promesa que devuelve la función anterior.
.
Por lo cual doTask() resolverá ‘Task 1’ que tomará el valor de ‘rta1’ en el .then((rta1) => //etc…).
.
Se agrega ‘Task 1’ al array de tareas y se retorna doTask2 () que resolverá ‘Task 2’ que tomará el valor de ‘rta2’, y el mismo proceso con doTask3() y rta3, retornando al final el array de tareas ‘strings’.
.
exercise.js:

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

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

  return doTask1()
    .then((rta1) => {
      strings.push(rta1);
      return doTask2();
    })
    .then((rta2) => {
      strings.push(rta2);
      return doTask3();
    })
    .then((rta3) => { 
      strings.push(rta3);
      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);
  });
} 

.
.
.
.
.
.
.
.
.
.
.
…

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

export function runCode() {
  const strings = [];
  return new Promise((resolve) => {
    doTask1().then(rta1 => {
      strings.push(rta1);
      return doTask2();
    }).then(rta2 => {
      strings.push(rta2);
      return doTask3();
    }).then(rta3 => {
      strings.push(rta3);
      resolve(strings);
    }).catch(error => {
      console.log(error);
    })
  })
}

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 function runCode() {
  const strings = [];
  return new Promise((resolve) => {
    doTask1()
      .then(rta1 => {
        strings.push(rta1);
        return doTask2();
      })
      .then(rta2 => {
        strings.push(rta2);
        return doTask3();
      })
      .then(rta3 => {
        strings.push(rta3);
        resolve(strings);
      });
  })
}

File tasks.js

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

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

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

Archivo exercise.js

import { doTask1, doTask2, doTask3 } from './tasks';
export function runCode() {
  const strings = [];
  return new Promise((resolve) => {
    doTask1()
    .then(rta1 => {
      strings.push(rta1);
      return doTask2();
    })
    .then(rta2 => {
      strings.push(rta2);
      return doTask3()
    })
    .then(rta3=>{
      strings.push(rta3);
      resolve(strings);
    })
  })
}

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

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 function runCode() {
const strings = [];
return doTask1()
.then(function (respuesta1) {
strings.push(respuesta1);
return doTask2();
})
.then(function (respuesta2) {
strings.push(respuesta2);
return doTask3();
})
.then(function (respuesta3) {
strings.push(respuesta3);
return strings;
})
}