‫-: Hablemos ahora de
‫los problemas que pueden surgir cuando usamos demasiadas funciones de devolución de llamada.
‫Y para
‫hacer eso, haremos un pequeño ejemplo
‫para ilustrar este efecto.
‫Ahora recuerde que si ya está familiarizado con Promises
‫y Async / Await y, en general,
‫Asynchronous Java Script, no
‫dude en omitir esta sección y marcar
‫todos los videos como completados para que aún
‫pueda completar el 100 por ciento de
‫la curso.
‫Pero si desea
‫aprender todo sobre Asynchronous
‫Java Script y cómo usarlo en OJS, sigamos adelante.
‫Así que
‫adelante, obtenga los archivos de inicio para este proyecto de
‫los archivos del curso.
‫Ya lo tengo aquí en mi escritorio,
‫así que esta carpeta aquí.
‫Y es solo este archivo allí,
‫así que eso es todo lo que necesitaremos para comenzar.
‫Y lo tengo aquí en VS Code ya abierto y lo
‫que vamos a hacer para
‫comenzar es simplemente crear un NX. Archivo JS.
‫Justo como antes.
‫Ahora lo que vamos a hacer es
‫esto, vamos a usar este,
‫este archivo de perro aquí, este archivo de texto.
‫Y a partir de aquí leeremos la raza canina.
‫Y luego haremos una solicitud HTTP para
‫obtener una imagen aleatoria de un perro con esta raza.
‫Y luego guarde esa imagen aleatoria en
‫otro archivo de texto.
‫Así que es un proceso de tres
‫pasos y todo esto implicará funciones de devolución de llamada.
‫Y al final veremos el problema que tenemos cuando usamos
‫todas estas funciones de devolución de llamada
‫unas dentro de otras.
‫¿Okey?
‫Entonces, para eso, usaremos una
‫API bastante popular.
‫Que es más como una API divertida.
‫Pero para este tipo
‫de cosas es una buena idea usarlo.
‫Entonces es el PERRO. CEO, API.
‫Así que solo presiona Dog API aquí.
‫Luego
‫aquí, la documentación.
‫Y lo que queremos es conseguir un perro al azar,
‫o una raza determinada.
‫Así que haga clic aquí por raza.
‫Y aquí
‫abajo, aquí está el punto final de la API que vamos a alcanzar.
‫Entonces es esta URL aquí.
‫Entonces, cuando haces clic en buscar aquí,
‫cada vez que obtienes una nueva imagen, ¿de acuerdo?
‫Y así,
‫en esta sección, de hecho, haremos una
‫solicitud HTTP tal como aprendimos antes
‫en la sección anterior.
‫Bueno.
‫Entonces, todo lo
‫que tendremos que hacer es crear una solicitud HTTP a esta
‫URL y luego nos devolverá una imagen.
‫¿Okey?
‫Pero por ahora, comencemos con una parte en
‫la que leemos el archivo y obtenemos el contenido de
‫ese archivo.
‫Entonces en nuestro index. js, nuevamente necesitamos el paquete o módulo
‫del sistema de archivos.
‫Entonces FS
‫y requiere el módulo FS aquí.
‫Y al igual que antes, hacemos fs. readfile y
‫hacemos la versión asincrónica.
‫Bueno.
‫Recuerde que aquí pasamos la ubicación del archivo y luego una
‫función de devolución de
‫llamada que se llamará tan pronto como terminemos de leer el archivo.
‫Entonces tenemos nuestra cadena de plantilla aquí.
‫Y luego usamos un nombre de directorio como lo hicimos antes.
‫Entonces el nombre del directorio actual.
‫/perro. TXT.
‫Bien, y luego nuestra función de devolución
‫de llamada, que el primer argumento como siempre es error.
‫Y luego los datos que realmente están en el archivo.
‫Y solo para asegurarnos,
‫logrémoslo en la consola, por supuesto.
‫Entonces, otra cadena
‫de plantilla para que podamos generar nuestros datos aquí.
‫Bueno.
‫Arranca la terminal aquí
‫y súbela un
‫poco.
‫Y entonces estoy usando nodemon como lo hice antes
‫y luego index. js.
‫De acuerdo, la raza es un perro perdiguero.
‫Y eso es exactamente lo que tenemos aquí en este archivo.
‫De acuerdo, el perro perdiguero es la raza que buscaremos.
‫Ahora, dentro de esta función
‫de devolución de llamada, queremos hacer esa solicitud HTTP
‫de la que acabamos de hablar antes.
‫Y en realidad hay formas
‫de hacerlo
‫sin módulos JS nativos.
‫Pero es más fácil usar un paquete NPM para eso.
‫Y hay muchos de nuevo,
‫pero el que vamos a usar se llama Super Agent.
‫Más adelante usaremos otro, pero
‫por ahora Super Agent está bien para eso, está bien.
‫Y para descargar este módulo usando NPM, comenzaremos
‫creando nuestro archivo de paquete Jason.
‫¿Recuérdalo?
‫Así que déjame terminar esto y
‫hacer NPM en él.
‫Y simplemente presione enter en todos estos.
‫Esto realmente no importa.
‫Bueno.
‫Solo queremos este paquete. jason
‫para que realmente contenga el nombre del paquete
‫que estamos usando.
‫Así que siempre hacemos eso cada vez que comenzamos un nuevo proyecto.
‫Y ahora NPM instala, o
‫simplemente podemos usar la I, que es lo mismo y luego el
‫nombre del paquete.
‫Así que no hay nada nuevo allí, ¿verdad?
‫Ahora para usar
‫este paquete, creamos una
‫nueva variable que luego contendrá la función Super
‫Agent que este módulo nos expone.
‫Ahora sigamos adelante y usemos esa función de
‫Super Agent.
‫Entonces, para hacer una solicitud de
‫obtención, simplemente usamos el método de obtención en ella.
‫Así que obtén y luego necesitamos esa URL.
‫De acuerdo, este que les mostré antes.
‫Así que cópielo
‫y péguelo aquí en
‫una cadena de plantilla.
‫Porque ahora vamos a reemplazar
‫esta raza aquí.
‫Bien, no queremos
‫eso, sino que queremos
‫usarlo, el que obtenemos de nuestro archivo.
‫Entonces, en este caso, son datos.
‫¿Derecha?
‫Y
‫así, podemos hacer una solicitud HTTP get.
‫Ahora, para obtener los
‫datos, también tendremos que usar el método end en esto.
‫Y aquí es donde pasaremos la función de
‫devolución de llamada.
‫Entonces, nuevamente, es un error la primera
‫llamada de regreso y
‫luego pasamos el resultado también.
‫Entonces, en esta
‫función, primero
‫registremos el resultado en la consola.
‫Entonces, los datos que obtenemos están en la variable de respuesta.
‫Así que este de aquí.
‫Y luego está el cuerpo.
‫Entonces ahí es donde está la respuesta real.
‫Bien, ahora sigamos adelante y probemos eso.
‫Y ahora, con este guardado aquí, en realidad se movió hacia abajo.
‫De nuevo, eso
‫se debe a la extensión anterior que configuramos anteriormente.
‫Y tal vez también
‫notó cómo reemplazó las comillas normales que tenía aquí con
‫estas comillas
‫dobles y también insertó el punto y coma aquí.
‫Y de hecho, en la última
‫sección, o en una
‫de las últimas secciones, lo configuramos para
‫que siempre tengamos bien las comillas simples.
‫Entonces, para mantener nuestro código consistente
‫aquí, sigamos adelante
‫y creemos muy rápidamente el archivo de configuración más bonito.
‫Así que recuerda que eso es más bonito.
‫Luego, tenemos comillas simples.
‫Configúrelo en verdadero.
‫Y también recuerda el ancho de impresión.
‫Y ajústelo a 80.
‫Está bien, dale una oportunidad.
‫Guarde este de nuevo.
‫Y como ve, tenemos nuestras comillas simples ahora de vuelta.
‫Entonces eso se ve mucho mejor en mi opinión.
‫Nuevamente, si no le gusta de esta
‫manera, por supuesto, puede usar su propia configuración.
‫Está bien.
‫De todos
‫modos, este fragmento de código aquí
‫ya debería estar haciendo la solicitud HTTP.
‫Así que,
‫de hecho, probémoslo.
‫Y
‫de hecho, tenemos esta imagen aquí.
‫Entonces, en realidad,
‫lo que queremos está dentro de
‫este amigo en la propiedad del mensaje.
‫Así que puntee
‫el mensaje.
‫Así que así.
‫Y aquí tenemos nuestra imagen de perro perdiguero.
‫Sigamos adelante y cambiemos la raza aquí.
‫Y no soy muy bueno con los perros.
‫Usemos esta raza aquí que conozco,
‫Labrador.
‫Ni siquiera sé cómo decirlo.
‫Pero creo
‫que lo es, existe.
‫Vamos a salvarlo aquí de nuevo.
‫Y ahora tenemos otra imagen.
‫De hecho, podemos hacer clic aquí y
‫se abrirá esa imagen para nosotros.
‫Bueno.
‫Entonces, para hacer esta solicitud HTTP aquí, necesitábamos
‫los datos que obtuvimos antes.
‫Así que este dato.
‫Entonces, necesitábamos hacer esta solicitud aquí dentro de esta
‫función de devolución de llamada de la función
‫de lectura de archivo, ¿verdad?
‫Y entonces ya tiene una función de devolución de llamada aquí.
‫Así que este dentro de una devolución de llamada.
‫Pero ahora agregaremos otro.
‫Porque ahora queremos guardar esta cadena aquí en
‫un nuevo archivo de texto.
‫Y así lo haremos aquí.
‫Y luego eso nuevamente tendrá otra función
‫de devolución de llamada.
‫Vale, ¿tiene sentido?
‫Entonces fs
‫writefile
‫y luego el nombre del archivo.
‫Llamemos a esa imagen de un perro. texto.
‫Luego, los datos que queremos guardar en ese archivo que
‫está en reposo. cuerpo. mensaje.
‫Y luego la función de devolución de llamada.
‫Y este no tendrá ningún dato, por
‫supuesto, pero tenemos el error nuevamente.
‫Vamos a registrar algo en la consola
‫como una imagen de perro aleatoria
‫guardada en un archivo.
‫Guárdelo, luego se volverá a
‫ejecutar y aquí está nuestro archivo de imagen.
‫Y, de hecho, puede ver que el
‫código VS muestra esa imagen aquí para nosotros.
‫Déle otro guardado aquí, luego
‫volverá a ejecutar nuestro código
‫y ahora lo tenemos, de hecho,
‫tenemos una imagen diferente.
‫Está bien.
‫Entonces nuestro código realmente está funcionando.
‫Agreguemos un pequeño identificador de error aquí en
‫caso de que algo salga mal.
‫Por ejemplo, digamos que agregamos un nombre extraño aquí.
‫Ejecute esto de nuevo.
‫Y ahora mismo no podrá encontrar una imagen
‫para eso.
‫Y eso en realidad resultará en un error aquí.
‫Por lo tanto, siempre
‫debemos hacer este tipo de manejo de errores al
‫principio y
‫decirlo si hubo un error,
‫y podemos simplemente registrar el error. mensaje.
‫Y en realidad también deberíamos decir
‫que queremos volver de inmediato desde esta función si hay un error.
‫Por lo que volverá y se registrará
‫en la consola, este error.
‫Y entonces no pasará nada más.
‫Bueno.
‫Por lo que dice de nuevo, no se encuentra aquí.
‫Y no guardó nada en
‫el archivo porque ya regresamos de la función aquí.
‫¿Okey?
‫Y lo mismo en realidad aquí abajo
‫en caso de que haya un error al guardar el archivo en el disco.
‫Regresemos aquí, salvemos de
‫nuevo.
‫Y ahora está funcionando bien de nuevo.
‫Bueno.
‫Así que este es
‫solo un pequeño
‫ejemplo para mostrarle lo fácil que es terminar con devoluciones de llamada
‫dentro de las devoluciones de llamada dentro de las devoluciones de llamada.
‫Y eso es, por supuesto, porque,
‫ya sabemos que en
‫Note JS, siempre debemos usar código asincrónico, ¿verdad?
‫Terminamos usando devoluciones de llamada dentro de las devoluciones
‫de llamada dentro de las devoluciones de llamada.
‫Y, por supuesto, a
‫veces puede ser incluso más profundo de lo que tenemos aquí.
‫Por supuesto, podría
‫tener como 10 niveles uno dentro del otro.
‫Ahora todas estas devoluciones de llamada, hacen
‫que nuestro código se vea un poco desordenado.
‫Hace que sea difícil de entender y también,
‫en general, difícil de mantener.
‫Una vez más, tal vez no en este nivel con solo tres devoluciones de
‫llamada una dentro de la otra.
‫Pero si lo tuviéramos aún más anidado, rápidamente
‫podría convertirse en una
‫pesadilla mantener un código como este.
‫Y es por eso que
‫este patrón ha sido llamado infierno.
‫Es fácil
‫identificar esta forma triangular en nuestro código.
‫Es lo que tenemos aquí.
‫Como este tipo de forma triangular.
‫Siempre que veas esto, es una señal de que
‫básicamente estás en
‫el infierno de llamadas.
‫¿Okey?
‫Y tal vez
‫vea o escuche este término cuando haga una investigación
‫de Note JS o algo como esto.
‫Pero en este momento, esta es en realidad
‫la única forma que conocemos de cómo escribir código asincrónico
‫en este momento.
‫Pero lo guardaremos en el resto de
‫esta pequeña sección.
‫Entonces, aprenderemos a usar
‫algo llamado Promesas.
‫Y eso finalmente resolverá nuestro
‫problema y hará
‫que nuestro código sea más fácil de leer y mantener.
‫Así que hagámoslo en el resto de la sección.