Callback hell
Clase 10 de 26 • Curso de Asincronismo con JavaScript
Contenido del curso
Bryan David Castañeda Aranzales
student•
hace 4 años
Julian Jose Sossa Cruz
student•
hace 4 años
Walter Omar Barrios Vazquez
student•
hace 4 años
Clase 10 de 26 • Curso de Asincronismo con JavaScript
Contenido del curso
Bryan David Castañeda Aranzales
Julian Jose Sossa Cruz
Walter Omar Barrios Vazquez
Maria Gabriela Rodriguez Cuevas
Jorge A. Torres
Henry Jeffersson Salinas Arenas
Jesús Álvarez
Matias Ezequiel Rivero
Julián Fernando Salamanca Chacón
Rubén Ernesto Aragón Gil
Eduardo Zegers
Villegas Amaranta
Juan Carlos Montilla Sánchez
Ikal Esteban Fernández Galván
Aaron Carhuaricra
Leonardo Jaimovich
Carlos Casadiego
Carlos Orellana
Andrés Felipe Martínez Giraldo
Clem Acosta
Eber Eliud Rodriguez Alvarado
Emmanuel Fernando Gómez Díaz
jesus piedrahita
Edgar Alfredo López Salero
Cristian Zapata
Porfirio González López
Luis Perez
Juan Manuel Cortes
Brayan Fernando Moya Fernandez
José Florentino Ramos
Soe N. Lucas
Germán Edgardo Göhringer
Carlos Rubén Díaz Gutiérrez
Joao Ivan Garduño Salgado
Richard Pascual Huallpa Yapo
Fernando Orozco Velasquez
David Alvarez
Fernanda Vidal
Sebastian Rodriguez
Luis Alfredo Suarez
Alexandra Gabriela
Markin Piero Pulache Guarniz
Miguel Angel Perez Cardona
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.
Pienso lo mismo, salio la version 5 de webpack y cambiaron bastantes cosas.
Me sumo al pedido de un curso actualizado de webpack 🙋🏽♂️
🔥 𝗖𝗹𝗮𝘀𝗲 #𝟵: 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗵𝗲𝗹𝗹 𝟵/𝟮𝟭 🔥 . 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:++ .
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);
"test": "echo \"Error: no test specified\" && exit 1" por "callback": "node src/callback/challenge.js"
Queda así:"scripts": { "callback": "node src/callback/challenge.js" },
Ctrl + S y en la terminal, se ejecuta: npm run callback y debe aparecer la misma salida que node ...Muchas gracias por tus aportaciones
buen aporte, gracias
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!
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. });
Gracias...
gracias
las dos ultimas clases me rompieron la cabeza Dx
Somos dos
¿Lograste entender? Quedo atento para explicarte :)
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: “ .\ ”
Me salvaste compañero, ya decia yo porque no me aparece nada
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
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???
De hecho yo estoy siguiendo la escueja JS y noto un salto grande en el contenido con este curso. Ando bastante perdido.
efectivamente, yo tampoco entendí nada.
Otra opción a correr el código con node seria dirigirnos primero con cd al directorio que queremos y luego ejecutar node challenge
a mi me sale una silla 😁 https://api.lorem.space/image/furniture?w=640&h=480&r=4785
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.
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)
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
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
XD Último intento, compara tu código con el profe y así lo notarás. Me ha funcionado 2-3 veces.
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)
Me encantó esa ultima parte en la que dice el profe que todo se pudo haber sacado de una sola petición :)
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
muchas gracias... me servio!
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ó...
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.
Es un error del tema que está utilizando. Te duplica la primera letra pero nada más es visual, no la pone como tal.
En gnu/linux:
node ./src/callback/file.js
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
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"
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
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
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
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.
!Imgur
Espero sea de utilidad. 👨💻
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
buen aporte
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.