Callback hell

Clase 10 de 26 • Curso de Asincronismo con JavaScript

Bryan David Castañeda Aranzales

student•

Increible como mejoraron la calidad de este curso, cuando lo hice fue muy confuso pero nada que googleando no se solucione.

Y felicidades al profesor Oscar, la calidad de sus explicaciones ha mejorado demasiado; ojala hicieran otra vez el curso de webpack porque ha cambiado demasiado desde que lo hicieron.

Julian Jose Sossa Cruz

student•

Pienso lo mismo, salio la version 5 de webpack y cambiaron bastantes cosas.

Walter Omar Barrios Vazquez

student•

Me sumo al pedido de un curso actualizado de webpack 🙋🏽‍♂️

Maria Gabriela Rodriguez Cuevas

student•

🔥 𝗖𝗹𝗮𝘀𝗲 #𝟵: 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗵𝗲𝗹𝗹 𝟵/𝟮𝟭 🔥 . CallBacks Hell: Consiste en múltiples Callbacks anidados que provocan que el código se vuelva difícil de leer y ‘debuggear’ y por eso se debe evitar. . ✒️ ++Siguiendo con el proyecto:++ .

Ir a la terminal, para compilar challenge.js se coloca: node src/callback/challenge.js Se obtiene las 3 salidas: el id, el título que corresponde al id y el nombre del tipo de categoría:

{ //console.log(data1[0]);
  id: 7,
  title: 'Probando TS ed',
  price: 666,
  description: 'Probando TS',
  category: {
    id: 5,
    name: 'Others',
    image: 'https://api.lorem.space/image?w=640&h=480&r=9607'
  },
  images: [
    'https://api.lorem.space/image?w=640&h=480&r=1583',
    'https://api.lorem.space/image?w=640&h=480&r=3215',
    'https://api.lorem.space/image?w=640&h=480&r=8220'
  ]
}
Probando TS ed //console.log(data2.title);
Others //console.log(data3.name);

Para ejecutar mediante un script, se edita el archivo ++package.json++ y en la parte de “scripts” se sustituye la línea: "test": "echo \"Error: no test specified\" && exit 1" por "callback": "node src/callback/challenge.js" Queda así:

"scripts": {
"callback": "node src/callback/challenge.js"
},

Se guarda con Ctrl + S y en la terminal, se ejecuta: npm run callback y debe aparecer la misma salida que node ...

Jorge A. Torres

student•

Muchas gracias por tus aportaciones

Henry Jeffersson Salinas Arenas

student•

buen aporte, gracias

Jesús Álvarez

student•

Este curso es un ejemplo de lo que es Platzi y de lo que debemos ser cada uno de nosotros. Esta versión mejoró mucho comparada a la anterior. Iterar y mejorar en cada iteración. De eso se trata. ¡Nunca pares de aprender!

Matias Ezequiel Rivero

student•

Un breve resumen de callback código + comentario!! Espero que les sirve:

const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; // instanciamos xmlhttprequest.
const API = 'https://api.escuelajs.co/api/v1'; // API donde vamos a traer los datos.
// estados: 0 no iniciado - 1 cargando, aún no se llama a send - 2 cuando ya se ejecuto send
// 3 interactuando con la solicitud - 4 se ha completado la llamada.
// status: 200 solicitud correcta - 400 errores - 500 errores del servidor.
function fetchData(urlApi, callback) { // función donde generamos la conexión, recibe urlApi y un callback.
    let xhttp = new XMLHttpRequest(); // generamos una nueva instancia más corta en xhttp.
    xhttp.open('GET', urlApi, true); // abrimos una conexión con el método GET, urlApi y true para asincronismo.
    xhttp.onreadystatechange = function (event) { // cuando este cambio suceda, escuchamos el estado:
        if (xhttp.readyState === 4) { // comparamos el estado que sea igual a 4 (completado).
            if (xhttp.status === 200) { // comparamos el estatus sea igual a 200 (solicitud correcta).
                callback(null, JSON.parse(xhttp.responseText)); // retornamos callback null en error. Parse de datos.
            } else { // si lo anterior no ocurre:
                const error = new Error('Error' + urlApi); // generamos un nuevo error + urlApi.
                return callback(error, null); // retornamos callback con el error y null(para los datos).
            };
        };
    };
    xhttp.send(); // Enviamos el llamado o solitud.
};

llamados a la función fetchData:

// en el ejemplo se hacen varios llamados a modo de ejemplo, en el setTimeout del final se muestra la misma
// información de otra posición solo con el primer llamado, incluyendo el precio.
fetchData(`${API}/products`, function (error1, data1) { // llamamos la función con argumentos de url y func anónima.
    if (error1) return console.error(error1); // si se genera error retornamos error, info en data 1.
    fetchData(`${API}/products/${data1[0].id}`, function(error2, data2) { // volvemos a llamar a la función.
        if (error2) return console.error(error2); // retornamos error2 (si se produce) e info guardada en data2.
        fetchData(`${API}/categories/${data2?.category?.id}`, function(error3, data3) { // 3er llamado a la func.
            if (error3) return console.error(error3); // retorn. error3 (si se produce). Info guardada en data3.
            console.log(data1[0]); // mostramos los datos de la primer llamada (estudiar la api).
            console.log(data2.title); // mostramos los datos de la 2da llamada.
            console.log(data3.name); // 3er llamada.
        });
    });
    setTimeout( () => { // agregué este setTimeout para mostrar los mismos datos solo con el primer llamado a 5 seg.
        console.log(data1[1]); // se utilizó la posición 1 del array de la api para variar del ej. anterior.
        console.log(data1[1].title);
        console.log(data1[1].category.name);
        console.log(data1[1].price);
    }, 5000); // tiempo en milisegundos para ejecutar esos console.log.
});

Julián Fernando Salamanca Chacón

student•

Gracias...

Rubén Ernesto Aragón Gil

student•

gracias

Eduardo Zegers

student•

las dos ultimas clases me rompieron la cabeza Dx

Villegas Amaranta

student•

Somos dos

Juan Carlos Montilla Sánchez

student•

¿Lograste entender? Quedo atento para explicarte :)

Ikal Esteban Fernández Galván

student•

Para ejecutar en powershell es un poco distinto:

node .\src\callback\challenge.js

aviso por cualquier error las diagonales son diagonales invertidas y antes de src se agrega: “ .\ ”

Aaron Carhuaricra

student•

Me salvaste compañero, ya decia yo porque no me aparece nada

Leonardo Jaimovich

student•

hola, a mi me da siempre un error de node "node:internal/modules/cjs/loader:998

throw err;

^". Busque y recomiendan volver a instalar node en el dir del curso

Carlos Casadiego

student•

tengo una inquietud, por que para tomar este curso no es obligatorio POO ya que aca están usando instancias, peticiones httprequest, manejo de json, por que para explicar el concepto de callback mezclan todo cuando en principio el concepto de callback resulto siendo una maraña de codigo con temas de otros cursos???

Carlos Orellana

student•

De hecho yo estoy siguiendo la escueja JS y noto un salto grande en el contenido con este curso. Ando bastante perdido.

Andrés Felipe Martínez Giraldo

student•

efectivamente, yo tampoco entendí nada.

Clem Acosta

student•

Otra opción a correr el código con node seria dirigirnos primero con cd al directorio que queremos y luego ejecutar node challenge

Eber Eliud Rodriguez Alvarado

student•

a mi me sale una silla 😁 https://api.lorem.space/image/furniture?w=640&h=480&r=4785

Emmanuel Fernando Gómez Díaz

student•

Hola, tengo un error. Al correr el código me genera este error

Error: Error https://api.escuelajs.co/api/v1/products at xhttp.onreadystatechange (c:\Users\CO_EFGOMEZD\Documents\Platzi\AsincronismoJS\src\callback\tempCodeRunnerFile.js:14:31) at exports.XMLHttpRequest.dispatchEvent (c:\Users\CO_EFGOMEZD\Documents\Platzi\Asincronismo JS\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:591:25) at setState (c:\Users\CO_EFGOMEZD\Documents\Platzi\AsincronismoJS\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:610:14) at exports.XMLHttpRequest.handleError (c:\Users\CO_EFGOMEZD\Documents\Platzi\AsincronismoJS\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:532:5) at ClientRequest.errorHandler (c:\Users\CO_EFGOMEZD\Documents\Platzi\AsincronismoJS\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:459:14) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorListener (node:_http_client:481:9) at TLSSocket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3)

Al revisar el código línea por línea medi cuenta que el xhttp.status retorna 0 en vez d 200, alguien podría ayudarme para entender que sucede.

jesus piedrahita

student•

Hola buenas noches colega ya ta diste cuenta cual es el error porque me esta saliendo practicamente el mismo error: Error: Error https://api.escuelajs.co/api/v1/products at exports.XMLHttpRequest.xhttp.onreadystatechange (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/src/callback/challenge.js:16:21) at exports.XMLHttpRequest.dispatchEvent (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:591:25) at exports.XMLHttpRequest.send (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:396:12) at fetchData (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/src/callback/challenge.js:21:9) at Object.<anonymous> (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/src/callback/challenge.js:25:1) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) Error: Error https://api.escuelajs.co/api/v1/products at exports.XMLHttpRequest.xhttp.onreadystatechange (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/src/callback/challenge.js:16:21) at exports.XMLHttpRequest.dispatchEvent (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:591:25) at setState (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:610:14) at ClientRequest.responseHandler (/home/jesus-piedrahita/Documentos/projects/javascript/Cursos/javaScriptAsincrono/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:430:9) at Object.onceWrapper (node:events:642:26) at ClientRequest.emit (node:events:527:28) at HTTPParser.parserOnIncomingClient [as onIncoming] (node:_http_client:631:27) at HTTPParser.parserOnHeadersComplete (node:_http_common:128:17) at TLSSocket.socketOnData (node:_http_client:494:22) at TLSSocket.emit (node:events:527:28)

Edgar Alfredo López Salero

student•

Saludos el error se me presento un error parecido, me di cuenta que uno de los errores, es que en la posicion 0 del arreglo api, no existe nada. En la peticion que vayas a realizar, antes consulta en la api, de manera que este disponible

Cristian Zapata

student•

Si no te corre el código después de actualizar Node.js y npm ni de reiniciar el pc. Copia y pega todos los archivos del professor y elimina los tuyos. Funciona jajaja

Porfirio González López

student•

XD Último intento, compara tu código con el profe y así lo notarás. Me ha funcionado 2-3 veces.

Luis Perez

student•

Después de mas de una hora.. me puse los lentes, y me di cuenta que había una } mal cerrada pero como estaban en pares, no saltaba. Mire linea por linea hasta que la encontré, también compare y extraje código del profesor funcional y corte y pegue partes y los comente hasta que note que sección estaba sin funcionar. Capas poco funcional lo que hice pero me divertí. (repito no saltaba error exacto en que linea estaba)

Juan Manuel Cortes

student•

Me encantó esa ultima parte en la que dice el profe que todo se pudo haber sacado de una sola petición :)

Brayan Fernando Moya Fernandez

student•

Si les aparece el siguiente error. Deben actualizar NPM y nodeJS. ojalas les sirva. [https://es.stackoverflow.com/questions/24268/c%C3%B3mo-actualizo-nodejs-en-windows] SyntaxError: Unexpected token '.' at wrapSafe (internal/modules/cjs/loader.js:1047:16) at Module._compile (internal/modules/cjs/loader.js:1097:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10) at Module.load (internal/modules/cjs/loader.js:977:32) at Function.Module._load (internal/modules/cjs/loader.js:877:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) at internal/main/run_main_module.js:18:47

José Florentino Ramos

student•

muchas gracias... me servio!

Soe Lucas

student•

En 3:40 alrededor se ve que al ejecutar el comando

node src/callback/challenge.js

Si se fijan hay un typo al poner ssrc en vez de src

Lo extraño es que el código en el ejemplo de la clase corrió y al principio lo puse así, por lo que salieron errores pero luego le quité una s al src y funcionó...

Germán Edgardo Göhringer

student•

No se por qué pasa eso pero no es algo que el profe escriba.

En otra clase también pasó algo parecido. Cuando escribió

npm

Apareció

nnpm

Pero no dió ningún error. Parecería ser solamente algo visual.

Carlos Rubén Díaz Gutiérrez

student•

Es un error del tema que está utilizando. Te duplica la primera letra pero nada más es visual, no la pone como tal.

Joao Ivan Garduño Salgado

student•

En gnu/linux:

node ./src/callback/file.js

Richard Pascual Huallpa Yapo

student•

lo que no logro entender es cual fue la razón de hacer tres llamadas, si solo con la primera llamada podíamos obtener los datos necesarios ? o algo se me esta escapando

Fernando Orozco Velasquez

student•

Lo que se me ocurre a primeras es para saber como se nos podría formar un "Callback Hell" y también para ver como trabajar con las "urlApi"

David Alvarez

student•

Creo que modificaron el contenido de la API inicial a mi me arroja otro objeto diferente:

{
  id: 1,
  title: 'Tasty Frozen Gloves',
  price: 134,
  description: 'The Football Is Good For Training And Recreational Purposes',
  category: {
    id: 5,
    name: 'Others',
    image: 'https://api.lorem.space/image?w=640&h=480&r=9727'
  },
  images: [
    'https://api.lorem.space/image?w=640&h=480&r=6198',
    'https://api.lorem.space/image?w=640&h=480&r=4521',
    'https://api.lorem.space/image?w=640&h=480&r=8417'
  ]
}
Tasty Frozen Gloves
Others

Fernanda Vidal

student•

A mi me muestra el “id”: 2 , pensé que era un error en mi código, pero consultando directamente la API, me di cuenta que muestra desde el 2

Sebastian Rodriguez

student•

Creo que lo hicieron de nuevo jaja, a mi me arroja desde el 5

{
  id: 5,
  title: 'Incredible Granite Bike',
  price: 9786,
  description: 'New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016',
  category: {
    id: 5,
    name: 'Others',
    image: 'https://api.lorem.space/image?w=640&h=480&r=2873'
  },
  images: [ 'https://api.lorem.space/image?w=640&h=480&r=7972' ]
}
Incredible Granite Bike
Others

Luis Alfredo Suarez

student•

Callback Hell en JavaScript

El término "callback hell" (infierno de callbacks) se utiliza en el contexto de la programación en JavaScript para describir una situación en la que se anidan múltiples callbacks dentro de otros callbacks de una manera complicada y difícil de leer. Esto suele ocurrir cuando se trabaja con código asincrónico, como solicitudes HTTP, lectura/escritura de archivos o cualquier otra operación que no se resuelva de manera inmediata.
Aquí tienes un ejemplo de código que podría considerarse un "callback hell":

function hacerAlgo(callback) {
  setTimeout(function() {
    console.log("Haciendo algo...");
    callback();
  }, 1000);
}

function hacerOtraCosa(callback) {
  setTimeout(function() {
    console.log("Haciendo otra cosa...");
    callback();
  }, 1000);
}

function hacerAlgoMas(callback) {
  setTimeout(function() {
    console.log("Haciendo algo más...");
    callback();
  }, 1000);
}

hacerAlgo(function() {
  hacerOtraCosa(function() {
    hacerAlgoMas(function() {
      console.log("Todas las tareas se han completado.");
    });
  });
});

En este ejemplo, las funciones hacerAlgo, hacerOtraCosa y hacerAlgoMas son funciones asincrónicas que toman callbacks como argumentos. Cuando quieres realizar estas acciones en secuencia, terminas anidando los callbacks uno dentro del otro, lo que hace que el código sea difícil de leer y mantener, especialmente cuando se tienen más funciones asincrónicas involucradas.
Para abordar el callback hell, puedes utilizar técnicas como Promesas (Promises) o async/await que hacen que el código asincrónico sea más legible y estructurado.
Aquí tienes el mismo ejemplo utilizando Promesas:

function hacerAlgo() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log("Haciendo algo...");
      resolve();
    }, 1000);
  });
}

function hacerOtraCosa() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log("Haciendo otra cosa...");
      resolve();
    }, 1000);
  });
}

function hacerAlgoMas() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log("Haciendo algo más...");
      resolve();
    }, 1000);
  });
}

hacerAlgo()
  .then(hacerOtraCosa)
  .then(hacerAlgoMas)
  .then(function() {
    console.log("Todas las tareas se han completado.");
  });

Este código utiliza Promesas para estructurar las tareas asincrónicas en una secuencia más clara y legible. Además, se evita la anidación excesiva de callbacks, lo que facilita el mantenimiento del código.

Espero sea de utilidad. 👨‍💻

Alexandra Gabriela

student•

El curso ya es algo viejo hoy en dia es mucho mas facil esto. Yo lo hice usando axios: En lugar de utilizar XMLHttpRequest, en Node.js puedes utilizar la biblioteca axios o node-fetch para realizar solicitudes HTTP. Estas bibliotecas proporcionan una interfaz más amigable y consistente para realizar solicitudes en Node.js. Para instalarlo: npm install axios

Markin Piero Pulache Guarniz

student•

buen aporte

Miguel Angel Perez Cardona

student•

Sin duda el profesor a diferente de los cursos anteriores ha mejorado bastante. Le entendi mucho más a diferencia antes.

Gracias, por la clase.

Callback hell

Introducción

Lo que aprenderás en este curso

Qué es el asincronismo

Event Loop

Iniciando a programar con JavaScript

Callbacks

Configuración

Qué son los Callbacks

Playground: Ejecuta un callback con 2s de demora

XMLHTTPRequest

Fetch data

Callback hell

Promesas

Qué son las promesas

Playground: Crea una función de delay que soporte asincronismo

Fetch

Fetch POST

Async Await

Funciones asíncronas

Try and catch

Playground: Captura el error de una petición

¿Cómo enfrentar los errores?

Generadores

Generators

Proyecto CV

Proyecto del curso

Consumiendo API

Desplegando el proyecto

Playground: Crea una utilidad para hacer peticiones

Nunca pares de crear

Conclusión

¿Qué camino tomar para seguir aprendiendo?

Autoevaluación de Proyecto: Creación de Landing Page