Playground - Resuelve el callback hell usando promesas

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 promesas

Comentarios

Pablo Pincay Alvarez

student

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

Osvaldo Martinez Guillen

student

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

Tatiana Muñoz Muñoz

student

gracias por el dato de las dos pestañas.

Diana Loboa

student

Probando cositas XD

Probando un metodo de las promesas

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

Rahiber Paradas

student

Muy interesante su solucion.

Daniel Sebastián Rodríguez

student

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

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

Gutierrez Diego

student

No tengo ni la mas remota idea de que hacer...

Leonardo de los angeles Espinoza Hernandez

student

¡Hola, Diego!

¿Qué es lo que te causa conflicto para resolver este ejercicio?

Natalia Ramirez Parra

student

Hola Diego, Te aconsejo que veas el problema paso a paso. Puedes empezar con lo más sencillo que será coger el archivo tasks.js y convertir estos callbacks a promesas. (Mira la estructura de como se realiza una promise, que hace el callback y como lo puedes cambiar, esperando el mismo resultado). Luego en el archivo principal, transformas el callback hell a un Encadenamiento de promesas, pero como haces esto dirás, te paso este enlace: https://es.javascript.info/promise-chaining. Ve poco a poco, muchas veces la respuesta no dará ni siquiera en el quinto intento, Pero podrás hacerlo con paciencia y verás que lo lograrás. A mi también me ayuda, ver código de los otros compañeros y entenderlo. Un poco tarde la respuesta, pero si no te sirve a ti ojalá le sirva a otros.

Ricardo Alfonso Chavez Vilcapoma

student

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

Francisco Javier Solis Martinez

student

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

Joan Alexander Valerio Rodríguez

student

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 😃

Ricardo Alfonso Chavez Vilcapoma

student

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

Andrés Soret Chacin

student

My solution 👇

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:**

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

Harrison Steve Pinzón Neira

student

Solución! :D

David Ochoa

student

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

Callback hell

!Spoiler Shield

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

Julio Bastidas

student

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

Carina Payleman

student

. . . . . .

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

Alexis Corrales

student

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

Christian Ricardo Conchari Cabrera

student

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

Pariksit Erikrsnan Ortiz Flores

student

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

Daniel André Amaya López

student

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

Salvador Gonzalez Blanco

student

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

Angel Javier Sanchez Tenjo

student

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

¡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