Domina la integración de API en React con Axios | Integra tu aplicación con el backend

1. Introducción al curso: Bienvenidos a los cursos en los que vamos a dominar la integración API en react. Mi nombre es Fassel y estoy encantada de guiarte a través apasionante mundo de la integración de API en el mundo de Soy un emprendedor con pasión por la enseñanza en línea, y en mi carrera, he construido muchas aplicaciones robustas que han sido utilizadas por millones de usuarios en todo el mundo, y estoy aquí para compartir mi experiencia y conocimiento con todos ustedes. En el mundo dinámico actual, integración de API es uno de los aspectos importantes a la hora construir aplicaciones escalables de grado de producción. Cada aplicación web que ves tiene un front-end y un back-end, y si estás construyendo front-end, es crucial que entiendas cómo puedes integrar tu aplicación y comunicarte con el servidor backend A lo largo de nuestro viaje, profundizaremos en la integración de API con react. Haremos uso de eje para lo mismo. Hablando del curso, este curso cubre muchos aspectos de la integración de API y la realización de llamadas a API. Por ejemplo, siempre que estés haciendo una llamada a la API, es probable que no obtengas una respuesta inmediata. Entonces, ¿cómo puedes administrar la carga para que hayas mejorado la experiencia del usuario y cómo puedes administrar los estados de error También simplificaremos el proceso de hacer llamadas API, y veremos cómo se puede hacer y lograr con eje. También entenderemos cómo puedes hacer llamadas EPI simultáneas usando axis También tenemos un escenario en el que cubriremos diferentes tipos de solicitudes EPI como get request, post request, estaremos mejorando la seguridad haciendo uso de interceptor Entonces todas estas características es todas estas cosas es lo que vamos a estar cubriendo en este curso en particular. Y al final de este curso, puedo garantizar que tendrás habilidades en las que podrás integrar cualquier tipo de EPI en tu aplicación de reacción con confianza sin ninguna ayuda Y esto te abriría infinitas posibilidades en el mundo del desarrollo web. ¿Para quién es este curso? lo que este curso es perfecto para cualquiera que esté buscando elevar sus habilidades de desarrollo de reacción. Entonces, ya sea que seas un desarrollador más fresco, un desarrollador experimentado o un desarrollador intermedio o si eres alguien que solo está explorando cómo se pueden integrar los EPI en las aplicaciones front-end, entonces este curso sería perfecto para todos ustedes Entonces, con ese conjunto, ¿estás listo para transformar la forma en que manejas las API en tu aplicación web que se construyen usando react? Estoy súper emocionada de llevarte a través de este curso, y te veré del otro lado. 2. Configurar un proyecto en React: Oye, ahí. Entonces ahora es el momento de que comencemos a crear nuestra aplicación react, y lo vamos a hacer con la ayuda de la línea de comandos. Entonces primero lo primero, lo que voy a hacer es dirigirme o navegar a través de la línea de comandos hasta la carpeta del proyecto. Ahora lo que quiero decir con carpeta de proyectos es que es una carpeta de mi elección donde deseo tener mis proyectos de reacción organizados, ¿de acuerdo? Entonces, lo que puedes hacer es dirigirte al Finder. Como si estás en Mac, puedes dirigirte a Finder o si estás en Windows como yo, puedes dirigirte a Explorer, derecha, y crear una carpeta en la ubicación que elijas, puedes llamar a la carpeta, como quieras. Yo lo nombraría reaccionar. Y luego desde la línea de comandos, puedes simplemente navegar hasta la ubicación donde has creado la carpeta. Así que he creado esta carpeta de reacción aquí en esta ubicación en particular, y CD es el comando, que es cambiar directorio, y me está ayudando a navegar o dirigirme a esta carpeta en particular o a estar en esta carpeta desde la línea de comandos. Entonces ahora estoy en esta carpeta en particular, voy a borrar todo lo demás. Todo bien. Ahora en esta carpeta en particular, voy a comenzar a crear mi aplicación react. Y para esto, voy a hacer uso de NPX, ¿de acuerdo? Uy. Entonces ya he creado algunas aplicaciones de reacción antes. Entonces puedes ver esta sugerencia por aquí, bien, pero no hay nada que pueda hacer al respecto. ¿Bien? Pero ignora esta sugerencia por ahora porque lo que este uh terminal en particular hace este uh terminal en particular es lo que vea en tu historia, simplemente te sigue sugiriendo, lo cual es bueno. Mostrarte todo el comando, eso está completamente bien. Entonces NPX voy a hacer uso de NPX. ¿Bien? Ahora, NPX es un derecho de sintaxis, se usa para ejecutar los paquetes de nodos, o se usa para ejecutar los paquetes Y luego vamos a hacer uso de la app Create react. Todo bien. Ahora, ¿qué es la aplicación Create react La aplicación Create React es una especie de herramienta que te ayuda a crear toda la aplicación React. Ahora bien, ¿por qué estamos haciendo uso de esto? Porque, ya sabes, el proyecto react tiene que organizarse de cierta manera. Al igual que, necesita tener la carpeta SRC. Necesita tener algunos archivos. Y todo esto se unen y te permiten o permiten que tu aplicación funcione de una manera fluida, ¿verdad? Para que puedas ir y crear manualmente esos archivos también. Pero esta es una herramienta que le permite crear el para crear o configurar la estructura de la aplicación de la manera correcta. ¿Bien? Y después de esto, solo voy a mencionar el nombre de mi aplicación, así puedo llamarla aplicación MyRact, algo así Bien. Y lo que puedo hacer es simplemente presionar Enter. En el momento en que presiono Enter, lo que esto va a hacer es que va a crear una carpeta en esta ubicación en particular. Entonces en esta ubicación en particular, se va a crear esta carpeta. ¿Por qué está creando una carpeta en esta ubicación? Porque he navegado a esta carpeta desde la terminal, y este será el nombre de la carpeta bajo el cual existirán todos los archivos de mi proyecto react ¿Bien? Entonces puedes presionar Enter, y deberías ver algún tipo de procesamiento sucediendo. Así podrás ver la creación de una nueva app de reacción en esta ubicación en particular. Está instalando algunos paquetes, y esto podría tardar un par de minutos. Entonces se está instalando. También te está diciendo lo que está instalando. Se trata de instalar react, react Dom, react scripts, y todo, todo lo que necesita. Entonces esperaremos un rato hasta que se complete todo este proceso y veamos una confirmación. Entonces tengo la confirmación, y también recibí un mensaje menor. Bien. Entonces para cuando comencé a grabar este video, hay una nueva versión menor, dice de NPM que está disponible, y me está preguntando si puedo actualizar Bien, entonces voy a actualizar más tarde. Puede que no veas esto, bien, pero voy a ignorar esto por ahora. Es solo una notificación de actualización. Puedes ver la confirmación por aquí, happy hacking. Bien. Y si te desplazas hacia arriba por aquí, verás todo el proceso de lo ocurrido. Entonces ejecutamos este comando aquí. Uy. Déjame desplazarme hacia arriba. Así que ejecutamos este comando por aquí. Bien, si vienes por aquí, puedes ver que agregó tantos paquetes. Tomó 36 segundos. Si vienes aquí, bien, ha dicho que el éxito creó esta aplicación en particular en esta ubicación y dentro de ese directorio. Entonces necesitas navegar a este directorio, y dentro de este, puedes ejecutar todos estos comandos por aquí. ¿Bien? Ahora, una vez que navegue le ha dado comandos listos para usar como NPN start, comenzará en el servidor de desarrollo Entonces, la aplicación react que has creado viene con un servidor inbllt incrustado Puedes ejecutar puedes ejecutar este comando para agrupar la aplicación y en archivos estáticos, básicamente para implementación de producción, esto iniciará el ejecutor de prueba en caso de que quieras ejecutar casos de prueba, NPM ejecuta expulsión Bien, esto es algo que puedes correr. Entonces la sugerencia es, puedes comenzar por ejecutar esto por aquí. Voy a copiar esto. ¿Bien? Lo pegaré por aquí. Voy a dirigirme a este directorio, o, y luego te está diciendo que comience NPM. Ahora bien, este es un comando mediante el cual puedes iniciar un servidor de desarrollo en tu máquina local. Así que también puedo ejecutar este comando, ¿de acuerdo? Y se podía ver la aplicación en funcionamiento. Entonces esta es la aplicación, ¿de acuerdo? Se puede ver el navegador automáticamente abierto, y se puede ver, esta es la aplicación que está en funcionamiento. Ahora bien, este es un servidor que te está mostrando tu contenido o si está ejecutando tu aplicación react en el navegador. Ahora, cualquier cambio que hagas en los archivos, verás recargas en vivo sucediendo por aquí. ¿Todo bien? Ahora, puedes ver el mensaje por aquí, como necesitas editar este archivo en particular y guardarlo para volver a cargarlo ¿Bien? Entonces esta interfaz viene de este archivo en particular es lo que dice. Y si das click por aquí, este es el enlace al sitio web oficial de react. Eso es a lo que se ha vinculado. ¿Bien? Así que puedes ir a ese sitio web y revisar o leer algunas cosas también. Todo bien. Pero algunas cosas que me gustaría mencionar por aquí es que una vez que hayas iniciado el servidor de desarrollo, puedes detenerlo presionando Control y C en Windows o Comando y C en Mac. ¿Bien? Estoy en Windows, así que presiono Control C, y pueden ver que terminó este trabajo en particular. Y aquí ahora ven si intentas refrescarte, esto no va a funcionar. Bien, porque el servidor está caído, ¿verdad? Ahora, para que tu servidor esté en funcionamiento, necesitas ejecutar NBM start dentro de esta carpeta en particular ¿Bien? Sólo entonces su servidor estará activo. Entonces, mientras desarrollas mientras haces desarrollo, puedes mantener el servidor encendido y realmente modificar los archivos y guardar y ver los cambios que ocurren en vivo. ¿Bien? Ahora, voy a tiza un poco más sobre este comando. Así que creamos la app react o toda la aplicación usando este comando en particular. Ahora también puedes agregar opciones por aquí al final. ¿Bien? Entonces lo que puedes hacer es hacer uso de las plantillas de aquí. ¿Bien? Ahora, digamos que cuando estés trabajando con react, también quieres hacer uso de mecanografiado. ¿Bien? Entonces, si estás haciendo uso de mecanografiado, puedes agregar algo como esto Puedes decir plantilla por aquí, y puedes decir escribir script. No voy a ejecutar esto, pero esto es solo una información extra. Lo que esto hará es que hará uso de la plantilla de mecanografía para crear tu aplicación, y agregará el soporte de mecanografía desde el principio, lo soporte de mecanografía desde el principio, cual es útil si estás trabajando en un proyecto más grande que pueda beneficiarse de una beneficiarse Todo bien. Entonces puedes hacer uso de este comando de esta manera, bien. Espero que esta orden sea clara. NPX crea tap de reacción. Así que no tenemos el servidor abierto en ejecución, pero ahora puedes reiniciar el servidor de nuevo diciendo NPM run NPM start. Lo siento. Entonces es inicio de NPM, algo así. Y si lo inicias, volverá a iniciar el servidor. Todo bien. Entonces espero que esto sea útil y espero que hayas podido seguirlo. 3. Configurar nuestro IDE: código en Visual Studio: Esta es nuestra primera aplicación basada en reaccionar, que creamos, ¿de acuerdo? O debería decir que no creamos. Bien. Por lo que este proyecto se genera automáticamente usando la aplicación Create React. Bien, y también nos está dando alguna pista por aquí. Puedes editar app dot qs y guardarla para recargarla. ¿Bien? Tiene un enlace para aprender a reaccionar, que te llevará al sitio web oficial de react. Muy bien, hasta ahora tan bien. Entonces esta es nuestra aplicación en funcionamiento. Ahora, ¿qué tenemos que hacer? Tenemos que empezar a codificar y modificar las cosas. ¿Y qué vamos a hacer por eso? Vamos a instalar un IDE que es el código ID de Visual Studio. Bien. Entonces así es como se ve. Si ya lo tienes en la computadora bien y bien, si no lo haces, entonces dirígete a este sitio web oficial. Es una herramienta gratuita. Es gratis, construido sobre código abierto, funciona en todas partes. Ya que estoy en Windows, me está incitando a descargar un establo construido para Windows Puede cambiar al sistema operativo que necesite. Pero si tu sistema operativo tiene un instalador por aquí, va a hacerlo automáticamente. Entonces, si estás iniciando sesión desde Mac por aquí, te va a mostrar la descarga de Mac. ¿Bien? Entonces, cualquiera que sea la plataforma desde la que estés abriendo esto, te va a mostrar ese botón y podrás pasar por esto si no estás al tanto de qué es el código de Visual Studio Pero solo descárgalo e instálalo como cualquier otro programa de software. Ya lo tengo instalado, así que no voy a estar mostrándote los pasos de instalación, pero los pasos de instalación no son para nada complejos. Es muy sencillo y directo. 4. Primeros pasos: Ahora, una vez que haya instalado correctamente el código de Visual Studio, verá una página como esta. Entonces, si abres el código de Visual Studio, por primera vez, verás esta página de Bienvenida. Ahora, he sido usuario de código de Visual Studio por un tiempo, ¿de acuerdo? Y ustedes están viendo todos estos proyectos recientes. Por lo que es probable que no veas esta lista de proyectos recientes a menos y hasta que seas usuario. ¿Bien? Pero como soy usuario, como dije, estoy viendo la lista de proyectos recientes que he usado o creado en el pasado. Además, verás estas opciones por aquí, nuevo archivo, archivo abierto, carpeta abierta, clon repositorio Git, conéctate a todo esto. Es una herramienta muy útil. Código de Visual Studio, lo uso todo el tiempo. Ahora para abrir el proyecto, ya conoces la carpeta, donde has creado el proyecto. Así que simplemente puedes hacer clic aquí, Abrir carpeta y puedes navegar hasta la ubicación de la carpeta donde has creado el proyecto. Alternativamente, si por alguna razón no estás viendo esto, puedes ir al archivo desde las opciones del menú aquí y puedes ver carpeta abierta. Ambos son iguales. Entonces lo que voy a hacer es seleccionar OpenFolder, voy a navegar al directorio de mi elección, y voy a abrir el proyecto por aquí Ahora cuando seleccioné Abrir carpeta, vi esta ventana de carpeta, que es exploer navegarla hasta la carpeta donde he creado la app react Y seleccionaré esta carpeta en particular. Este es mi proyecto de app react que hemos creado. En el interior, verás algunos archivos, pero debes seleccionar la carpeta raíz. Diré seleccionar, y me abrirá esta carpeta en particular. Ahora puedo cerrar esta página de bienvenida por aquí, ¿de acuerdo? Entonces puedes ver el proyecto por aquí en el lado izquierdo, ¿de acuerdo? Puedes ver toda esta carpeta. Si expandes esto, verás los archivos dentro. ¿Bien? Entonces, cuando ejecutaste el comando llamado Create React app, bien con la app Create React, creó todo esto para ti. También puedes crearlo manualmente. Pero como puedes imaginar, esto va a ser muy tedioso, Para que esa herramienta en particular, aplicación Create React haga el trabajo por ti , en la que configura toda la estructura del proyecto por ti. ¿Bien? pasaremos por esta estructura de proyecto Pronto pasaremos por esta estructura de proyecto, pero por ahora, lo que también me gustaría explicar es que tenemos el servidor listo y funcionando desde la terminal. Ahora bien, lo que puedo hacer es que no necesito hacer uso de un terminal externo. El código de Visual Studio tiene una forma en la que realmente puedo tener un terminal dentro del código de Visual Studio. De esta manera, nunca tengo que dejar código de Visual Studio y cambiar a una terminal local. Aquí en la parte superior en las opciones, voy a ver terminal por aquí. Se puede decir nuevo terminal, y se puede ver que este es un terminal integrado dentro del código de Visual Studio. Y si dices PWD, que está presente directorio de trabajo, el terminal se abre automáticamente en la carpeta que has abierto dentro del código de Visual Studio, que es la carpeta del proyecto Entonces no necesitas navegar también, no necesitas ejecutar comando, CD, y todo y navegar, esto simplemente funciona como una terminal local. Entonces aquí, puedo decir que NPM empieza de nuevo por aquí. En el momento que diga, voy a obtener un error, pueden ver, algo ya está funcionando en el puerto 3 mil. Y lo que se está ejecutando, nuestra propia aplicación se está ejecutando, y nos está preguntando si quieres ejecutar la app en otro puerto en su lugar. Yo no quiero hacer eso. Voy a decir que no. Bien, y sólo va a detener la ejecución. ¿Bien? Pero lo que voy a hacer es que voy cerrar este servidor porque ya no quiero hacer uso de un terminal externo, ya sabes, externo por aquí. ¿Bien? Quiero apegarme al código de visual studio proporcionado terminal, y voy a iniciar NPN, y esto ahora debería ejecutar el servidor de desarrollo por ti ¿Bien? Entonces de esta manera, lo que podemos hacer es mover esto a una nueva Ventana. Entonces aquí estamos en la nueva ventana, y tengo código de Visual Studio ejecutándose en la nueva ventana. Así que de esta manera, no tengo que dejar nunca el código de Visual Studio. Incluso puedo minimizar esto por aquí así. ¿Bien? Incluso puedo crear nueva terminal desde aquí, así que puedes ver más, y puedes tener múltiples terminales corriendo por aquí. ¿Bien? Es muy útil, y esta es la razón por la que. Entonces, este tipo de herramientas que proporciona el código de Visual Studio, esa es la razón por la que es tan querido en la comunidad de desarrolladores. Ahora, también te voy a mostrar la lista de extensiones que tengo. Entonces aquí, si vas a esta pestaña de extensión en el lado izquierdo, aquí tienes algunas opciones como buscar, tienes control de fuente, ejecuta y descorteza todo esto, ¿bien? Estoy haciendo uso de Docker también en algunos de mis proyectos, así puedes ver Docker por aquí también Pero tal vez no veas esto. ¿Bien? Esto necesita una extensión separada. ¿Bien? Pero si vas a extensión, ¿ ahora qué son las extensiones? Por lo tanto, las extensiones le permiten mejorar o ampliar la funcionalidad predeterminada que ya proporciona el código de Visual Studio. Para que puedan ver, tengo extensión para cuaderno Júpiter. Bien. Siempre que estoy codificando en Python, y si quiero soporte para notebook, hago uso de esta extensión. Bien. Entonces tengo esta extensión. Esto no es necesario para reaccionar. Tengo extensión Python. ¿Bien? Ahora bien, esta etiqueta de cambio de nombre automático, esto podría ser útil para reaccionar porque, ya sabes, si estás renombrando una etiqueta, bien, y si hay una etiqueta de cierre, lo que esto hará es que va a renombrar pagada la versión paga de esa etiqueta en particular Bien, entonces esto es algo que puedes tener. Es útil. Por ejemplo, si tengo que darte un ejemplo, déjame darte un ejemplo. Entonces digamos si creo o me dejo abrir algún archivo por aquí. Bien, déjame abrir un archivo HTML. Ahora bien, esta cosa de aquí, ya puede ver, déjame ir por aquí, desplazarme hacia abajo. Entonces este título tiene una etiqueta de apertura y una etiqueta de cierre. Entonces, debido a esa extensión en particular, si renombro la etiqueta de apertura, se puede ver que también se está renombrando la etiqueta de cierre ¿Bien? Entonces ese es el beneficio de esta etiqueta auto renombrada No tienes que renombrar primero la etiqueta de apertura y luego cambiar el nombre de la etiqueta de cierre, ¿verdad? Ser par de coloración, como se puede hacer a partir del icono en sí, se utiliza para que el color resalta el par de cierre del soporte Esto es útil si estás haciendo uso de muchos corchetes en tu Okay, Debugger para Java, dev containers, jango doco todo esto se usa para otros lenguajes, paquete de extensión para Java, gradle para Java e Italicde. ¿Bien? Esto es para el desarrollo asistido por IA. Esto también es para esto es ejemplos de uso de API de Intelicode. Bien. Tengo algunos para Python. Entonces estos son todos relacionados con Python, me desplazaré hacia abajo, un servidor en vivo. No necesitamos a este Maven para Java. Esto tampoco es necesario. Más bonita es algo que puedes usar. Esto da formato al código. Organiza el código para ti. Bien. Y si, esto es lo que tenemos Bien. También voy a añadir algunas extensiones ahora mismo por aquí. ¿Bien? Entonces, lo que puedes hacer es buscar fragmentos de código de reacción por aquí, algo como Bien. Bien, para que puedas buscar ES seven plus react, algo así. Y verás esta extensión con casi millones de instalaciones. Entonces esto es 12.9 millones ya que estoy grabando este video. Por supuesto, esto seguirá aumentando y es posible que veas un número diferente cuando estés viendo esto. Entonces esta es extensión. Este es el nombre ES seven plus react redux react Native snippets Ahora bien, lo que esto hace es que te da plantillas, ¿de acuerdo? Como, por ejemplo, si quieres crear una función, entonces puedes decir RAFC Simplemente puedes escribir eso y te dará toda la definición de función. Bien. Entonces este tipo de atajos que tiene, lo que te ayuda a ahorrar tiempo. Para que puedas instalar esto. Simplemente voy a hacer clic en Instalar y añadir a mi lista de extensiones. ¿Bien? Así que sí, ya lo tenemos instalado, ¿de acuerdo? Puedes explorar más complementos o extensiones de React en el mercado aquí y puedes jugar con él. Y puedes mejorar la funcionalidad predeterminada que ya te proporciona el código de Visual Studio. Todo bien. Entonces sí, eso se trata de configurar el código de Visual Studio, y espero que te haya resultado útil. 5. Integra APIs a la perfección en React: Entonces ahora es el momento de que comencemos a hablar sobre ¿cómo puedes trabajar con los EPI en tu aplicación de reacción Ahora, las API, como saben, EPI representan interfaz de programación de aplicaciones, y es una forma para un servidor remoto o back-end exponga el conjunto de funcionalidades al cliente ¿Bien? Y es posible que tenga una aplicación de reacción en el front-end que podría querer consumir esos servicios que están siendo expuestos por el servidor backend ¿Verdad? Y hoy, si estás construyendo algún tipo de aplicación, hacer uso de EPI es muy, muy común, ¿bien? No puedo imaginar una aplicación de grado de producción que no consuma EPI Bien, las APIs son muy comunes en estos días. Y si buscas convertirte en un desarrollador serio, es importante que entiendas cómo puedes hacer uso de los EPI de la manera correcta en tu aplicación de reacción Entonces eso es lo que vamos a cubrir una manera práctica, ¿de acuerdo? Entonces lo que vamos a hacer es que ya tengo esta aplicación react, que he creado usando VT y tengo app archivo GSX donde voy a escribir todo mi código Es un archivo componente, que se está renderizando en Minix por aquí puede ver que se está renderizando por aquí. ¿Todo bien? Ahora, lo primero que hay que trabajar con APIs, necesitas un conjunto de ABI, ¿de acuerdo? Y por suerte, tenemos un conjunto de API falsas gratuitas por aquí. Bien, eso se puede usar para pruebas y prototipado. Entonces voy a hacer uso de este sitio web llamado snplaceholder.typod.com. Todo bien. Y como venir por aquí, puedes escribir directamente la URL en el navegador o puedes buscar GCN Placeholder en Google y verás este marcador de posición cn Todo bien. Entonces, al llegar a este sitio web, verás que proporciona EPS falsos y confiables gratuitos para pruebas, ¿de acuerdo? Aquí se enumeran los patrocinadores. Bien, y te da una idea de cómo puedes usarlo por aquí ¿Bien? Para que puedas ver por aquí. Este es el punto final que está proporcionando. ¿Bien? Sí, es un dos al punto final, y puedes activarlo por aquí. Verás la S y la respuesta. ¿Bien? Se puede ver por aquí. Entonces tienes ID de usuario, ID, título, y completado aquí siendo mostrado. ¿Bien? Y puedes golpear la API. Bien. Déjame como cantidad de ella, puedes golpear la API de esta manera usando el método fetch en JavaScript. Ahora buscando JavaScript, no es un concepto de reacción, sino que es contenido relacionado con JavaScript, lo siento, concepto de JavaScript. Y como react se basa en JavaScript, puedes hacer uso de fetch en tu código Si ejecutas este script, lo que esto está haciendo es fetch es básicamente devolver una promesa, y luego estamos haciendo uso de entonces estas son escalonadas luego por aquí Entonces entonces espera a que esto termine. Entonces obtienes la respuesta por aquí y esto se ejecuta. Entonces lo que está sucediendo es que la respuesta se toma en consideración por aquí y se convierte en JSN y luego después de que se complete este proceso, tienes el JCN encerrado en la consola ¿Bien? Si ejecutas este script, verás que esto es lo que obtienes los resultados, verdad? Es navegador construido. Te permite atropellar aquí. Y hay muchos puntos finales que proporciona. Bien, puedes ver a Slash Post. Te voy a proporcionar 100 post, para que puedas ir por aquí. Puedes ver 100 publicaciones que te está proporcionando. Entonces, si quieres muchos datos, puedes consultar estos comentarios, álbumes, fotos, te proporcionará 5,000 fotos, , usuarios y todo. ¿Bien? Entonces sí, estas APIs que puedes hacer uso de. Hay toneladas de cosas. Si quieres hacer obtener solicitud, estos son diez puntos. Si quieres hacer post request, hay un par de puntos finales por aquí Solicitudes de parches, solicitud de eliminación también. Ahora bien, si estás al tanto de los EPI y cómo funcionan, estarás al tanto de que EPI son de diferentes tipos como get, post, put, patch, delete, Entonces, sí, eso es sobre este titular tipo JCN. Lo siento, JCNPlaceHLder. Todo bien. Lo que puedes hacer es que vamos a estar haciendo uso de esto por aquí. ¿Bien? Entonces viniendo a nuestra aplicación aquí, tengo una configuración de componentes muy simple. ¿Bien? Es solo devolver un Jex sencillo, que es solo tener el encabezado ¿Bien? Entonces lo que haremos es, obtendremos estos datos. Bien, entonces voy a copiar esto por aquí. Bien, enseguida. Y de inmediato pasaré esto por aquí en mi componente, pero no lo pegaré Bien. Voy a hacer uso del gancho de efecto de uso por aquí. Porque hay un efecto secundario, ¿verdad? ¿Y cómo usamos el efecto de uso? Entonces Ups, solo pop up. Bien, entonces, ¿cómo hacemos uso del efecto de uso? Tengo una función, antes que nada, o. y aquí, esta es una función que se llamará con la lógica. Bien. Y luego tengo una coma con la dependencia Entonces, sea cual sea la dependencia que quiera agregar, puedo agregar por aquí. Bien. Esto está hecho. Bien. Esta es una función de flecha, por lo que necesita tener una flecha. Todo bien. Esta es una sintaxis de la que voy a hacer uso, ¿de acuerdo? Ahora, quiero realizar esta operación. Entonces la operación va a residir en estas llaves, así que voy a tener un final por aquí, y voy a pegar el código de búsqueda por ¿Bien? Voy a que puedas terminar esto con punto y coma si quieres, así Bien, sólo voy a alejar para que sea visible en una sola pantalla por aquí. ¿Bien? Ahora, una cosa a tener en cuenta por aquí, estoy pasando un área de dependencia vacía por aquí porque quiero que este gancho de efecto de uso o este código se ejecute en el primer montaje o en la cantidad del componente, el primer render y no después de eso. En cuanto al efecto reglas de uso, si quieres que una lógica particular se ejecute en el montaje del componente, tienes que pasar una matriz de dependencias vacía por aquí. ¿Bien? Ahora, por supuesto, lo que esto hace es que lo busca Hace una llamada de búsqueda a este punto final en particular. Obtiene la respuesta y convierte en un JCN por aquí, y luego bloquea el JCN en la consola usando esta cosa ¿Bien? Así que de inmediato, lo que voy a hacer es que voy a abrir Consola por aquí Bien. Y te voy a dar un descargo de responsabilidad por aquí de que esta cosa se va a imprimir en la consola dos veces. ¿Por qué? Porque estamos corriendo en modo estricto por aquí. Bien, Mint ch sexo. Se puede ver el modo estricto. Si quieres ver la salida solo una vez en el montículo de componentes, tienes que quitar el modo estricto de ahí Todo bien. Entonces voy a guardar esto. En el momento en que guardes, verás esta salida en la consola. Todo bien. Se puede ver. Y puedes expandirte como verás, usa ID. Uh, título de identificación por aquí y caídas completadas. Todo bien. Entonces esto está funcionando absolutamente bien, y así es como puedes recuperar los datos y mostrarlos en la consola. ¿Todo bien? Ahora, por supuesto, mostrar datos en la consola no es el objetivo, pero el objetivo de aquí es ver cómo se puede hacer uso de fetch para hacer una llamada PA Bien, ahora tenemos los datos en nuestra aplicación react, pero solo estamos iniciando sesión en nuestra consola. Ahora, a partir de aquí, esta parte del código, podemos llevar estos datos a cualquier parte, ¿verdad? Podemos llevar estos datos a cualquier parte, es decir, si quiero, también puedo actualizar o establecer estos datos en un estado. ¿Bien? Y hagámoslo. ¿Bien? Entonces lo que voy a hacer es que voy a tener un estado por aquí. Diré datos. Voy a haber establecido datos por aquí, algo así, voy a decir use state por aquí y voy a tener un MTRA como inicialización por Entonces tengo este estado de datos. Ahora lo que puedo hacer es que tengo a este JCN por aquí, bien, como insumo Entonces, en lugar de registrarlo en la consola, lo que me gustaría hacer es decir, en lugar de registrar la consola JCN, diré set data, y voy a pasar este JCN por aquí Así. ¿Bien? Y esto está hecho. ¿Bien? Ahora bien, si guardo esto, los datos no se registran en la consola, si hago refrescar. Los datos no están bloqueados en la consola, sino que ahora se actualizan al estado. ¿Todo bien? Ahora se actualiza a estado. Pero no estamos haciendo uso del estado ni mostrándolo en ningún lado, ¿verdad? Entonces, lo que puedes hacer es mostrar los datos de búsqueda también, ¿verdad? los datos de búsqueda también, ¿verdad Entonces lo que voy a hacer es venir aquí, y dejarnos tener una lista desordenada Entonces ya que estamos consiguiendo una lista de valores por aquí. Entonces si ves los datos, si hago una llamada por aquí, o tenemos los datos por aquí, ¿ verdad? Esto es lo que son los datos. Así es como nos están enviando. Así podemos mostrar el ID de usuario, ID, título, y completarlo. Entonces lo que voy a hacer es que voy a tener lista desordenada por aquí. Voy a hacer uso de algún jar Script. Bien, diré mapa de puntos de datos. Ahora ya que estamos haciendo uso de array, Bien, diré mapa de puntos de datos. Ahora aquí dentro del mapa, lo que haríamos es que yo diría que hagamos por aquí, porque eso es lo que estamos buscando. Bien, estamos buscando el que hacer. Bien. Y así aquí ahora mismo estamos obteniendo un solo objeto. ¿Bien? Lo que haremos es que posteriormente lo actualizaremos para obtener una lista de objetos también. Bien, así que no te preocupes por eso. Bien. De hecho, yo diría aquí, ya que estamos obteniendo un solo objeto, ni siquiera necesitamos mapa. ¿Bien? Entonces lo que podemos hacer es dejarme quitar esto. ¿Bien? Ni siquiera necesitamos mapa, diría yo. Yo sólo lo mostraría de esta manera. ¿Bien? Entonces voy a decir datos tensos, y ¿cuál es la propiedad La propiedad es título, ¿verdad? Tenemos una propiedad de título, así que voy a decir título, algo así. Bien. Vaya, así que esto estará en el par de llaves rizadas Puedes ver que este es el título que estamos obteniendo de la API. Se puede ver. Bien, estos son los datos que estamos obteniendo, ¿verdad? También puede mostrar ID, ID de usuario completado. ¿Bien? Para que puedas mostrar tu identificación por aquí. Bien. Puedo mostrar el ID de usuario también, algo así. Bien. ID de usuario. Bien. Puedes ver que el ID es uno, el ID de usuario es uno. Bien. Y puedes tener algún tipo de texto por aquí también, ID de usuario. Bien, entonces, bien, no, esto es identificación. Entonces esto es para hacer ID en fin. Para hacer ID. Bien. Y esta es la ID de usuario. Entonces voy a tener ID de usuario, algo así. Y esto es para hacer título Bien, algo como esto, y se pueden ver los datos, ¿verdad? Y terminado o no, eso también puedes tener por aquí. ¿Bien? Tan completado o no que también se puede mostrar. Bien, depende totalmente de ti, pero no necesitamos mapa porque no vamos a conseguir una lista por aquí. ¿Bien? Entonces esto es para un solo conjunto de artículo por aquí. Ahora digamos mañana mañana. Entonces aquí, me desplazaré hacia abajo. Aquí estamos consiguiendo la lista de todos. Ya ves, estamos consiguiendo la lista de todos. Entonces esta misma lógica, puedes convertirla en para hacer por aquí, ¿verdad? Puedes hacer eso, ¿de acuerdo? O cambiemos esto para publicar también. Puedes cambiarlo para publicar si quieres. ¿Bien? Entonces lo que voy a hacer es tomar el punto final. Publicar. ¿Bien? Lo voy a añadir por aquí. Bien. Y voy a reemplazar este punto final con esto, algo así. Voy a quitar esto. Bien. Esto es bastante sencillo. Y ahora, lo que voy a hacer es que voy a tener datos de mapa de puntos porque ahora estamos obteniendo la lista de información, ¿verdad? Entonces tendré este mapa. ¿Bien? Entonces antes que nada, antes de agregar mapa, voy a tener una lista lista desordenada Entonces diré mapa de datos por aquí. Bien. Y aquí, voy a decir post. Por cada puesto, bien, necesito hacer algo. ¿Bien? ¿Qué voy a hacer? Eso es lo que voy a definir aquí, ¿de acuerdo? Por cada publicación, voy a tener una lista por aquí, ¿de acuerdo? Y la lista tendrá una clave. ¿Bien? Ahora, ¿cuál será la clave? ¿Cuál debería ser el valor de la clave? Por lo que debería ser ID. Voy a tener un identificador único para la clave. ¿Bien? Entonces puedo decir post dot ID por aquí. Bien. Entonces por aquí, después de LI, voy a tener la etiqueta P o etiqueta H dos dependiendo de cómo se quiera exhibirla. Diré post dot title, algo así. Bien. Y entonces, uh déjame ver, título es uno y el cuerpo es uno. Voy a decir título, y luego P, y luego tienes, uh cuerpo postal. Entonces se puede decir postt body, algo así. ¿Bien? Esto está hecho. Bien, ahora te está dando el error. Entonces, si ves el error, creo que sé cuál es el error. Es probable que tenga que hacer o se puede ver datos mapa de puntos no es una función. ¿Bien? Entendido. Así que aquí estamos configurando esto como una matriz. ¿Bien? Así que vamos a eliminar esto y voy a poner esto en null por aquí. Bien. Y veamos si el error desaparece. Bien, el error no va. Bien, entonces me di cuenta de un problema. El problema era establecer esto en nulo. ¿Bien? Así que configurarlo en una matriz vacía era realmente correcto. ¿Bien? No sé por qué estaba recibiendo el error al hacer una actualización dura, el error se fue. ¿Bien? Entonces el código es correcto. Tenía esta matriz vacía correctamente colocada inicialmente, Bien, porque queremos tenerla como una matriz porque estamos haciendo uso del mapa por aquí, ¿verdad? Y map es un método solo para arreglos, ¿de acuerdo? Funciona con arreglos. Ahora si ves, después de hacer una actualización dura, y si veo por aquí, puedes ver el cuerpo de la publicación y el título de la publicación, puedes ver cómo se muestra por aquí. Bien. Si lo desea, puede mostrar el cuerpo del poste usando la etiqueta del tazón. Puedes tener B por aquí. ¿Bien? O puedes tener fuerte, de hecho, ¿bien? Entonces voy a decir fuerte. Bien. Y sólo voy a añadir el título envuelto en el fuerte y se puede ver título y la pose aquí. Bien. Así que en realidad estamos sacando 200 pose Bien, porque eso es lo que dice esta API, Bien, si ves por aquí, da, perdón, 100 pose, no 200 posts. Está dando 100 pos y estamos exhibiendo 100 pose por aquí. ¿Bien? Usando el fetch fetch de JavaScript. ¿Bien? Entonces, como funciona esto es, inicialmente, este bloque de código de efecto de uso se ejecuta en el primer montaje de componentes. ¿Por qué se ejecuta en el primer montaje de componentes? Debido a esta matriz de dependencias? Según las reglas, si la matriz de dependencias está vacía, bien, cualquier bloque de código que tenga aquí se ejecutará en el montaje del componente una vez. Ahora lo que sucede en el montaje de componentes, haces uso de fetch Usted llama a este punto final de aquí, y luego tiene un conjunto. Se te da una promesa, y luego estás haciendo uso de entonces por aquí para obtener la respuesta en Jason, y luego estás haciendo uso de la respuesta para establecer datos. ¿Bien? ¿Qué son los datos establecidos? Establecer datos es un uso de datos de conjunto, puede establecer los datos por aquí, que no es más que el estado de aquí. Entonces es un conjunto de funciones. ¿Bien? Entonces tienes datos con estos datos que estás obteniendo del servidor. Ahora, ¿qué haces? Puedes hacer uso del mapa de aquí para mostrar los datos de esta manera. Bien, entonces estamos iterando a través de él y estamos mostrando. Si estamos recibiendo solo una publicación por aquí, si estás obteniendo solo una publicación y no la lista de publicaciones, entonces no necesitas mapa porque no necesitas iterar sobre los datos, ¿verdad Espero que esto tenga sentido , ¿de acuerdo? Entonces aquí es donde se unen todos los conceptos de Javascript react . Bien, entonces, ¿cuántos conceptos estamos usando? Estamos usando los ganchos de efecto de uso, estamos usando el concepto de ganchos. Estás haciendo uso de los estados de aquí. Estás haciendo uso de fetch de JavaScript. Estás haciendo uso de promesas por aquí. Y luego por aquí, estás haciendo uso de la función de mapa con matrices, y estás mostrando los datos. También estás haciendo uso de su sexo. ¿Todo bien? Para que puedas ver cómo esto está renderizando los datos desde un servidor remoto. Y espero que hayas podido seguirlo, y espero que esto haya sido útil. 6. Gestiona de manera eficiente los estados de carga y el manejo de errores: Oye, ahí. Entonces estamos hablando de ¿cómo se puede trabajar con APIs en react? Y en el proceso, lo que estamos haciendo es que hemos construido un componente muy sencillo que hace una llamada a esta API para obtener la lista de post, y estamos mostrando los datos aquí en el componente. ¿Bien? Y esto es lo la salida que estamos obteniendo hasta el momento. Y si deseas ver esto en pantalla completa, entonces este es nuestro EPI, y esto es lo que es la salida ahora mismo, ¿bien? Estás viendo todas las publicaciones. Bien. No te preocupes. Este es este post o en algún otro idioma. ¿Bien? A lo mejor déjame traducir si traduzco esto, dice que está en latín. Bien. Absolutamente bien. Solo queremos algunos datos ficticios con los que trabajar, ¿verdad? No importa qué idioma. Bien. Entonces sí, esto es post. Ahora, estamos mostrando los datos. Ahora lo que puede pasar es que cada vez que estás trabajando con EPI estás haciendo una llamada a servidor remoto, ¿de acuerdo? Estás haciendo una llamada remota a algo, ¿verdad? Y habrá un escenario en el que los datos que estás obteniendo estén tomando un poco de tiempo. Entonces es una buena práctica manejar o tener una interfaz en la que le digas al tener una interfaz en la que le digas usuario que se están obteniendo los datos, y ese estado, podemos llamarlo como un estado de carga, ¿verdad Entonces, ¿cómo manejarías el estado de carga cuando lo estás haciendo o cuando estás obteniendo datos de un servidor remoto Además, este fue el primer escenario en el que querría manejar un estado de carga. segundo escenario es que quizás quieras manejar cualquier tipo de situaciones de error, ¿de acuerdo? Ahora bien, el error podría ser como que podría haber errores tipográficos en la URL o se obtienen los datos, pero cuando lo estás convirtiendo a JSN, estás recibiendo un error por ahí, bien, porque los datos que se reciben no están en el ¿Cómo manejarías y administrarías los errores en ese caso? Bien, eso es algo de lo que vamos a hablar. Entonces dos cosas estamos hablando manejar el estado de carga y administrar los errores al trabajar con APIs, ¿bien? Primero, hablemos del estado de carga. ¿Bien? Entonces para el estado de carga, en realidad podemos tener una interfaz de usuario personalizada, o diferente G six que devolvemos si el estado se está cargando. ¿Bien? Entonces lo que voy a hacer es, primero tendré un estado por aquí. Diré cargando. Bien, y voy a decir set cargando por aquí. Bien, y voy a decir usa estado, algo como esto. Bien. Y voy a tener esto. Bien. Entonces puedes tener esto es un booleano Este es un estado booleano por aquí, ¿de acuerdo? El estado está teniendo datos booleanos. Entonces true significa que actualmente está cargando datos, y false significa que no se está cargando actualmente. ¿Bien? Entonces voy a tener esto inicializado a falso, digamos por aquí Bien. Ahora lo que haríamos es si el estado es cierto, lo que podemos hacer es no querer mostrar esta interfaz. ¿Bien? Porque si se están cargando los datos, lo que hay en esta interfaz, los datos de post que estamos obteniendo del servidor. Si los datos aún no están recuperados y si están en el estado de carga, entonces no deberíamos mostrar esto En cambio, necesitamos un tipo diferente de interfaz de usuario, donde necesitamos decirle al usuario que oye, los datos se están cargando. ¿Bien? Entonces lo que puedes hacer es que puedes tener si declaración por aquí. Se puede decir si, y yo diré si cargando. Bien, así que si cargar es verdad, lo que hago es regresar. Por lo que puede tener múltiples declaraciones de devolución por aquí. Bien. Entonces aquí estás devolviendo algunos JSX, pero si la carga es cierta, devuelves un J seis diferente por aquí y ¿qué estamos regresando Devolveremos una simple etiqueta P por aquí. Bien, entonces sólo voy a añadir una etiqueta P, y voy a decir cargando, algo así. Muy sencillo. Bien, es sólo un mensaje de texto. No estoy estresando en crear una interfaz compleja, pero puedes definir algo complejo por aquí también. Eso es lo que significa. ¿Bien? Ahora aquí, esto no se está rindiendo porque el estado es falso, ¿verdad? Entonces en el momento en que cambie el estado a true, si guardo esto, verás que se muestra la carga. ¿Verdad? Cargando significa que esto todavía se está cargando y los datos aún no se han recuperado. ¿Bien? Entonces esto es lo que verá el usuario cuando se vayan a buscar los datos, ¿verdad Y estamos cambiando manualmente esto verdadero a falso y falso a verdadero, ¿verdad? Y estamos viendo si está funcionando bien. ¿Bien? Entonces esto no está recibiendo ningún tipo de error, esto es perfectamente válido. Se pueden tener múltiples declaraciones de devolución, pero deben ser condicionales. Como esto es condicional, ¿verdad? No puedes tener solo declaración de devolución por aquí. Bien, en realidad es una función después de todo, ¿verdad? Esto se vuelve inalcanzable porque estás regresando por aquí, Entonces no tiene sentido porque estas son funciones de script Ja por aquí, nada más, ¿verdad? Para que puedas tener este tipo de devoluciones. Se puede decir si está cargando, entonces devuelve esto, ¿de acuerdo? Ahora lo que tengo que hacer es cuando se van a buscar los datos, necesito establecer el valor para cargar el estado para cargar por aquí ¿Bien? Entonces lo que voy a hacer es aquí, inicialmente, voy a decir que el estado es falso, bien. Y dentro de este efecto de uso por aquí. Entonces, cuando se van a buscar los datos, ¿de acuerdo? Diré set loading. ¿Bien? Entonces, cuando estamos configurando los datos por aquí. Entonces inicialmente, cuando se inicia la carga dentro de este efecto de uso, puedo decir set loading a la de true. Algo así. Bien. Y luego una vez que los datos son traídos por aquí Entonces cuando se está llamando a los datos del conjunto por aquí, cuando termine la carga, entonces podemos tener, podemos agregar esto a Cibras porque ahora estamos agregando más de una sentencia y aquí puedo decir set loading to that off puede decir set loading to that of falls porque loading is done, ¿verdad Bien. Entonces así es como puedes gestionar la carga. Ahora, si guarda esto, si está refrescando, verá que se muestra la carga cuando se realice la llamada de la EPA. Se puede ver, se puede ver. Llega por apenas un segundo porque la EPA es rápida, claro. Bien. Pero si la API está tomando un poco de tiempo, claro, esto estará ahí por un tiempo. Entonces, ¿qué estamos haciendo? Estamos manejando estado de carga con la ayuda de un estado por aquí, ¿de acuerdo? Estamos mostrando cargando con la ayuda de un estado. Tenemos el estado de carga definido con valor predeterminado de caídas, y entonces estamos teniendo esta UI que si la carga es verdadera, entonces devolvemos este JSX, ¿bien? Puedes modificar esto a lo que quieras. Puedes tener CSS personalizado definido para esto. Es totalmente tu elección. Pero, ¿cómo se está exhibiendo y ocultando esto? Primero en el gancho de efecto de uso, lo primero que estamos haciendo es establecer loading a true. Y luego estamos fijando la carga a caídas. Ahora bien, si te pierdes una vez se obtienen los datos y se actualizan en el estado, estamos configurando la carga en fols para que se muestren los datos Si te pierdes este paso por alguna razón, establecer la carga en pliegues, solo quedará atascado en la carga es cierto. A pesar de que los datos se establecen aquí en la entrada en el estado por aquí, ¿de acuerdo? No estás actualizando el estado que tú que tenías verdad por aquí inicialmente. Necesito actualizar esto. Y en el momento en que actualice, verá que se están recuperando los datos. Y esto te está dando una buena indicación al usuario de que se está cargando un dato , si el EPI lleva tiempo Entonces así es como puedes administrar el estado de carga cuando trabajas con llamadas API. ¿Bien? Ahora viene la segunda parte, que es el manejo de errores. ¿Bien? Ahora, manejo de errores, es evidente si estás trabajando con EPI, pueden ocurrir errores, ¿verdad Entonces lo que voy a hacer es que voy a tener un estado más por aquí. Diré const, diré error, y diré set error, y diré use State a la de null. Bien. Entonces inicialmente el error es nulo. Es un estado que estoy creando por aquí. ¿Bien? Al igual que he declarado por cargar datos y error. Todo bien. Y lo que voy a hacer es aquí, tengo esto entonces, este es el DN que se ejecuta una vez que se reciben los datos en el formulario JSN Bien, lo que puedo hacer es agregar un paso más por aquí. Puedo decir atrapar. Bien. Se puede decir atrapar por aquí, y yo puedo decir error, atrapar el error, y en realidad se puede manejar el error por aquí. ¿Bien? Entonces puedo decir consola punto Iniciar sesión aquí primero. Puedo registrar el error. Puedo decir uh, bien. Déjame hacer uso de las plantillas. Bien, entonces voy a decir error al buscar datos. Bien. Y puedo simplemente tener la información del error por aquí. Al ser aprobada. Bien, esto está hecho. Bien, me perdí el punto y coma, así que voy a agregar un punto y coma aquí Bien. Voy a alejar un poco. Entonces eso es visible en la vista única. Entonces tengo este error de punto de Consola. Entonces puedo decir set error. Bien, establecer error, y puedo actualizar el error por aquí. Puedo actualizar la información de error al campo para obtener los datos Entonces este es el mensaje que quieres mostrarle al usuario. Estoy configurando eso, ¿de acuerdo? Y estoy diciendo que se ponga cargando a la de caídas, ¿de acuerdo? También necesitas actualizar la carga a cae por aquí porque inicialmente has establecido la carga en true. Justo en el efecto de uso. ¿Bien? Entonces, una vez que se cargan los datos, los estás configurando en caídas, y una vez que hay algún tipo de error, estás configurando la carga en caídas porque ya se ha terminado de cargar, ¿verdad? Por lo que es necesario actualizar el estado. ¿Bien? Y necesitamos mostrar el error al usuario. Si quieres, puedes exhibir. Entonces lo que voy a hacer es agregar si algo así. Puedo decir si error por aquí. Voy a mostrar el error. Simplemente mostraré el error. Puedo decir error, así. ¿Bien? Ahora bien, si refrescas, no obtendrás ningún tipo de error por aquí, ¿de acuerdo? Pero lo que puedes hacer es en realidad puedes, uh, podemos crear un objeto de error personalizado y realmente puedes lanzar el objeto de error y podemos ver cómo está ocurriendo el error. Eso es algo que puedes hacer por aquí. Bien. Entonces una vez que los datos están siendo recuperados por aquí, lo que puedes hacer es decir un nuevo error o puedes decir lanzar nuevo error. Necesitas lanzar el error, lanzar nuevo error. Bien. Digamos que obtuvo este error al pasar el GSN Entonces se puede decir, Ups. Entonces esto saldrá afuera. Se puede decir que algo salió mal. Algo salió mal, algo así, y puedes salvar esto. Se puede ver que no se consiguen los datos, ¿verdad? Porque estamos lanzando un error personalizado por aquí manualmente, bien, para simular la situación de error. Todo bien. Y si vienes a Consola, deberías ver que se muestra el error. Se puede ver error al recuperar datos, algo salió mal en esta diapositiva ¿Bien? También se puede ver el mensaje. ¿Bien? Ahora estás haciendo el registro de puntos de consola. Se puede hacer error de punto de consola. Esa es una buena práctica por aquí. Cuando se trata de errores de registro. Ahora si refrescas, verás que el rehacer se muestra en rojo ¿Verdad? Entonces así es como está funcionando, y está lanzando dos veces porque estamos en estricto mod, claro. Entonces sí, así es como puedes manejar el error por aquí. ¿Bien? Espero que esto sea claro y te esté dando una buena indicación de cómo puedes construir aplicaciones fáciles de usar porque, ya sabes, cosas como EPI tardando tiempo en cargarse o las respuestas tardando tiempo en ser renderizadas o que ocurra cualquier tipo de error Todas estas son situaciones normales. Estos son todos los casos H que pueden suceder. Y por supuesto, cuando construyes cuando estás construyendo aplicaciones dinámicas que consumen APIs, es importante que seas consciente de cómo puedes lidiar con esto. ¿Todo bien? Espero que esto sea útil, y espero que esto te dé un buen conocimiento sobre cómo puedes trabajar con APIs. Entonces, sí, eso es todo. Te veré pronto. 7. Simplifica las llamadas a API en React con Axios: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar de Axis. Ahora bien, ¿qué es Axis? Axis es un cliente HTTP, que está basado en promesas para JavaScript. ¿Bien? Ahora, cuando digo JavaScript, significa que se ejecuta en navegador, nodejs, react, y todo eso. ¿Todo bien? Ahora bien, este es el sitio web oficial de axisxshttb.com, e incluso puedes hacer Una simple biblioteca de Axis de búsqueda de Google o en cualquier lugar, como en Google o cualquier motor de búsqueda favorito de su elección, verá este primer enlace aquí arriba, que es Axis HTDP doc intro Bien, entonces esta es la URR de aquí. Si vienes a este sitio web, verás algunos detalles sobre lo que es Axis. Y en el lado derecho, se puede ver algún código que es una demostración de cómo funciona Axis. Es una simple solicitud de obtención que se está haciendo. ¿Correcto? Ahora, axis y fetch, ambos son los métodos populares para realizar solicitudes HTDP en JavaScript Pero hay algunas cosas en cuanto a por qué se está utilizando el acceso. El acceso es sencillo. Tiene un concepto de interceptores, ¿de acuerdo? Entonces interceptores significa si por ejemplo, si cada llamada a la API en su aplicación también debe tener un token OT, o algún tipo de encabezados que sean consistentes en todas las llamadas API, entonces lo que puede hacer es tener el concepto de interceptores donde puede tener un manejo centralizado de estos encabezados comunes Estos son interceptores, ¿de acuerdo? Entonces sí, el acceso también es bastante popular entre Fetch. Así que Fetch es una forma incorporada de hacer llamadas API. El acceso es una biblioteca. Bien, entonces vienes por aquí en esta página. Si dices empezar, serás llevado a esta página, donde verás algunas de las características del eje, puedes ver, tiene una forma de interceptar solicitud y respuesta usando interceptores Puedes hacer todo este tipo de soportes prometidos API. Puedo transformar los datos de solicitud y respuesta. También puedes cancelar la solicitud. Hay tiempos de espera. ¿Bien? Así que da un poco más de flexibilidad en comparación con buscar por aquí ¿Bien? Se puede ver el establecimiento límites de ancho de banda para la silla de nodo. Manejo automático de JSN en la respuesta, bien, publicando formularios HTML como JASN Todo esto. Ahora bien, esto no está disponible por defecto. Es necesario instalar este paquete NPM eje instalado. ¿Bien? Si estás usando BR, puedes hacer uso de esto. Entonces para NPM, este es un comando para BoA, este es un comando, y para Yarn este es un comando, ¿de acuerdo? Hay otras formas de usarlo usando estas etiquetas de script por aquí. ¿Bien? Ahora bien, si echas un vistazo al ejemplo de aquí en el lado izquierdo, si haces clic en este botón de ejemplo, verás que así es como puedes hacer uso de él. ¿Bien? Puedes ver que este es el código para hacer una solicitud de obtención y manejar la respuesta, atrapar el error, y tener finalmente también. Bien, finalmente siempre se ejecuta independientemente de si la solicitud fue exitosa o no. Bien. Entonces esto es una demostración por aquí. Vamos a probar ejemplos prácticos por aquí para eje y veremos cómo podemos hacer uso de él en nuestro proyecto. ¿Todo bien? Tengo un proyecto simple por aquí, bien, donde en lo que estoy haciendo es que en realidad estoy teniendo una llamada API por aquí usando fetch Bien, estoy lanzando un error personalizado, que voy a desactivar. Entonces, si no hay error, ya verás, bien, así que estoy viendo un error todavía por aquí. Así que hice una actualización dura, y en realidad funcionó, ¿de acuerdo? Entonces acabo de comentar esto el error personalizado que estaba generando, y esto es lo que es la salida. Para que puedas ver el estado de carga por aquí, bien, cargando. Y estamos manejando carga y error por aquí. Si hay algún tipo de error, lo estamos mostrando. Y estamos manejando todas estas tres cargas de datos y errores con la ayuda de estados, y estamos haciendo uso de fetch por aquí, ¿de acuerdo? Ahora transformemos esta cosa, yo diría a eje. Ahora, lo primero que necesitamos es que necesitamos acceso a una terminal, así que dirígete a la terminal de aquí. Bien. Esto te dará una terminal en el directorio de trabajo actual. Para que puedas escribir PWD y ver dónde estás. En realidad estoy en mi proyecto por aquí. Bien. Diré claro. Y ahora se podía ver este comando por aquí, donde decía, Así es como se podría instalar el eje. Simplemente voy a copiar este comando porque estoy haciendo uso de NPM. Y voy a correr esto por aquí. Bien. Ahora, esto agregará NPS. Lo siento, esto agregará eje a mi aplicación por aquí. ¿Bien? Por lo que se agregó con éxito. Bien. Y lo que yo haría es que puedas confirmarlo dirigiéndose al paquete dot has por aquí, y voy a probar esta terminal por aquí. Se puede ver eje se ha agregado como dependencia, ¿de acuerdo? Entonces sí, esto se ha hecho, y el eje ya está disponible para nuestro uso. Ahora, lo primero, si estás haciendo uso del eje, también necesitas importarlo. Entonces agregaré una declaración de importación en la parte superior. Diré eje de importación y autosugest y auto completa ¿Bien? Así que estamos consiguiendo esta instancia del eje por aquí. Ahora bien, lo que tenemos que hacer es en lugar de buscar, vamos a transformar esto en eje, ¿verdad Así que en vez de ir a buscar por aquí, ¿de acuerdo? Diré eje. Tot, ven aquí ¿Bien? Esto es lo que es. ¿Bien? Diré entonces respuesta. Y cuando lo mejor es aquí, estamos convirtiendo la respuesta a JCN Con Axis, no necesitas hacer eso. Bien, obtienes la respuesta como la propia JSN. Entonces, si vienes por aquí, verás una de las características del manejo automático de datos JCN en la respuesta, ¿verdad Entonces eso es algo bueno. Así que aquí, este paso se va a ir, ¿ok? Esto va a desaparecer por aquí. Aquí en lugar de Chasin, podemos simplemente cambiar el nombre de estas dos respuestas por aquí Podría decir respuesta, algo así. Diré establecer datos. Los datos del conjunto son respuesta. Ahora bien, esta respuesta es en realidad tener esta respuesta es un objeto y tiene atributo de datos. Hay que acceder a él de esta manera, datos de punto de respuesta. ¿Bien? Y en realidad se puede hacer un registro de la Consola para la respuesta también y ver lo que imprime. Yo sólo voy a hacer eso. Registro de consola y respuesta aquí. Bien. En breve revisaremos los registros de la consola, ¿de acuerdo? Pero así es como funciona y puedes establecer pliegues de carga. Tienes captura en la que estás captando el error, y el resto de las cosas son iguales por aquí, ¿de acuerdo? Y, sí, creo que debería funcionar absolutamente bien. Sólo voy a guardar esto y lo haré duro o fresco. Bien. Estás viendo la salida. Ahora bien, si te diriges a la consola, deberíamos ver, así que déjame ir a la consola, déjame alejarme un poco. Bien. Bien. Entonces, bien. Ahora por aquí, si ven si amplío esto, bien, pueden ver el objeto que se está imprimiendo, ¿de acuerdo? O déjame simplemente cambiar a pantalla completa, bien que sería mejor allá. ¿Bien? Entonces esta es la salida de aquí. ¿Bien? Déjame ir a inspeccionar. Ahora diga Consola. Ahora, se puede ver el objeto que se está imprimiendo. Ahora bien, este es el objeto, bien, que obtenemos Este es un objeto de respuesta, en realidad, ¿verdad? Y esto tiene datos. Se pueden ver estos datos. Entonces, si quieres acceder a los datos de la API que tienes, en realidad puedes decir datos de punto de respuesta. Bien, así es como lo administra, y los encabezados son básicamente los encabezados que tienes algunos datos de configuración. ¿Bien? Tienes alguna información relacionada con la solicitud. Tienes estatus. Entonces, si quieres acceder al estado, ¿cuál es el estado de solicitud o respuesta? Se puede decir estado de punto de respuesta. Puedes manejarlo de esa manera. ¿Bien? Entonces sí, el objetivo es mostrarte cómo se ven los datos de respuesta si estás haciendo uso de Axis y tienes que hacer uso de los datos de puntos de respuesta por aquí. ¿Bien? Entonces sí, así es como puedes empezar a usar el eje. Y espero que esto quede bastante claro. También puede manejar el error de esta manera si lo desea, puede ver, no obtener datos Y si vienes por aquí, bien, verás error al buscar datos, algo salió mal ¿Bien? Este es el mensaje de error que pasamos. ¿Bien? Puedes ver que algo salió mal, ¿verdad? Entonces así es como funcionarían las cosas. Voy a comentar esto, bien. Pero sí, este es eje para ti y espero que tengas bastante claro en cuanto a qué es el eje y cómo puedes hacer uso de él. 8. Ejecuta varias solicitudes GET simultáneamente: Entonces comencemos a hablar de cómo puedes activar múltiples solicitudes Get con eje, ¿de acuerdo? Entonces aquí estamos haciendo uso del eje para activar este punto final. Bien, este es el punto final de post. Y si vienes por aquí, bien, este es Jason placeholder dotpco.com Y aquí, estoy activando este primer punto final. Quiero activar un punto final más, digamos usuario, voy a abrir esto en una pestaña separada y se puede ver que estos son los datos que debo obtener. Bien, digamos que también quiero activar esta llamada a la API. ¿Cómo haría eso? ¿Bien? Entonces por aquí, lo que vamos a hacer es aquí, voy a decir eje punto todo en lugar de eje punto Get, ¿de acuerdo? O podemos mantener el eje punto Get y tendremos que mover este Get call al eje punto O. ¿Bien? Entonces eje punto O, algo así. Ahora lo que hace el eje punto O es que acepta una matriz, ¿bien? Y voy a cortar esto por aquí, cortar esto. Y voy a mover esto dentro de esta matriz por aquí. ¿Bien? Entonces déjame alinear esto un poco mejor. Bien. Déjame alinear esto. Bueno, bien, tenemos esto por aquí. Bien. Y luego tienes entonces por aquí, que también estuvo ahí desde el principio. ¿Bien? Pero ahora estás haciendo esta única convocatoria del EPI por aquí Lo que voy a hacer es copiar esto. Voy a añadir una coma por aquí. Al final. Voy a añadir una llamada EPI más, y voy a copiar este punto final de usuario por aquí, y voy a reemplazar esta segunda llamada el punto final de usuario, algo así Entonces ahora se puede ver eje punto O. Yo sólo voy a alejar un poco, eje punto O por aquí, y estamos haciendo dos llamadas EPI separadas, como pueden ver Bien, solo extenderé esto. Entonces puedes ver que así es como va, ¿de acuerdo? Ahora bien, lo que haríamos es que lo estamos haciendo entonces, y de vez en cuando tenemos una respuesta, ¿de acuerdo? Entonces ahora necesitamos tener una manera de manejar la respuesta de ambos por separado, ¿de acuerdo? Y para eso, vamos a hacer uso del eje dot spread. Se puede ver la dispersión de puntos del eje. ¿Bien? ¿Qué es la propagación de puntos del eje? Así que la función de dispersión de puntos del eje. Entonces spread es una función que permite que las respuestas se manejen por separado, ¿de acuerdo? Ahora podemos pasar en post y usuarios como parámetro para que correspondan a las respuestas del post y los puntos finales de los usuarios por separado. Déjame mostrarte eso como puedes hacerlo. Entonces aquí en lugar de respuesta, voy a deshacerme de la respuesta por aquí, y podemos ver por aquí, publicar Bien, y usuarios. ¿Bien? Esto es algo que puedes hacer por aquí. Verás todas las marcas rojas por aquí, claro, porque estás haciendo uso de la respuesta y la respuesta no existe Así que voy a tomar este post por aquí y voy a sustituir la respuesta por post, algo así. Todavía estoy viendo una marca roja por aquí. Bien, entendí. Así que difundir básicamente, todo esto tiene que estar dentro de spread. ¿Bien? Entonces algo como esto. Entonces, sí. Espero que esto tenga sentido. Así que aquí, spread se está llevando todo esto por aquí, ¿de acuerdo? Y tienes post y usuarios por aquí. ¿Bien? La publicación es básicamente la respuesta de la publicación, y el usuario es básicamente la respuesta del punto final de los usuarios por aquí. ¿Bien? Y spread nos permite manejar estos dos por separado, ¿de acuerdo? Entonces estoy iniciando sesión en el post por aquí. También voy a iniciar sesión en la información del usuario por aquí. Bien. Déjame decir usuario Bien, usuarios. Déjame guardar esto. Se puede ver post está funcionando absolutamente bien. ¿Bien? Realmente genial. Voy a ir a inspeccionar, o déjame cerrar esta inspección. No por aquí, pero voy a tener esta vista de pantalla completa, y vamos a refrescar. Se puede ver la publicación que se muestra. Puedo inspeccionar, consola. Se puede ver que el objeto se imprime cuatro veces, porque cada objeto se está imprimiendo dos veces debido al modo estricto. Entonces aquí están viendo estos datos por aquí. Estos son los datos de la publicación. ¿Bien? Esto es lo primero, post data. Y luego tenemos de nuevo los datos del post. Bien, entonces esto es un dato de usuario, puedes ver. Esta es una información de usuario que se está buscando. Se trata de los datos del post otra vez, 100 y esta es la información del usuario, otra vez, que son diez usuarios, ¿verdad? Así que sí, así es como puedes manejar y trabajar con múltiples llamadas API. Y esta es una de las características o una de las flexibilidad que Axis nos ofrece. ¿Bien? Tienes ambos datos. Lo que puedes hacer es decidir lo que quieres hacer. Puede almacenar la información relacionada con la publicación en un estado, y puede almacenar la información relacionada con el usuario en otro estado, y puede mostrarla aquí. También puede renderizarlo en la interfaz de usuario. ¿Bien? Pero si, hasta ahora tan bien, somos capaces de hacer múltiples llamadas API con la ayuda de Axis, y espero que esto sea bastante claro para todos ustedes. 9. Envío de datos con solicitudes POST en Axios: Entonces ahora es el momento de que comencemos a hablar de ¿cómo puedes hacer uso de la solicitud de post en tu aplicación de reacción? Y para eso, por aquí en Jason Por favor titular, si te desplazas hacia abajo. Bien, aquí encontrarás este EPI o este punto final por aquí, que te permite hacer una solicitud de publicación ¿Bien? Entonces en slash Post, si haces una solicitud de publicación, bien, la aceptaría. Y aquí tienes una guía para ejemplo de uso. Así que me dirijo a la guía de ejemplos de uso, y me desplazaré hacia abajo por aquí. Bien, puedes ver este ejemplo por aquí, ¿de acuerdo? Así que creando un recurso, ¿de acuerdo? Entonces lo que va a hacer es que aquí estamos haciendo una solicitud de publicación. Se puede ver que el método es post. Este es el cuerpo que estás enviando, los encabezados, y así es como estás manejando la respuesta. Ahora, la respuesta que obtienes, bien, obtendrás lo que enviaste, junto con la identificación de aquí. aquí, esta es una API falsa, por lo que el recurso realmente no se actualizará en el servidor, sino que será falso como si. Bien. Entonces lo que vamos a hacer aquí es que voy a venir aquí. Bien. Y aquí, lo que necesitamos es que necesitamos una forma. Entonces aquí, voy a crear un formulario, voy a decir forma, algo así, y la forma no va a tener nada. Sólo voy a tener un botón que sólo activará una postsolicitud. Entonces voy a decir tipo de botón, voy a decir enviar por aquí. Bien y voy a decir add post, algo como esto. ¿Bien? Tienes este botón aquí, ¿de acuerdo? Ahora al hacer clic de esto, queremos que se active la solicitud de publicación. ¿Bien? Entonces voy a decir en enviar por aquí en enviar. Ahora necesito agregar una función. Necesito vincular esto a una función, así que voy a decir manejar, enviar. Bien. Esto aún no existe. Por supuesto, tenemos que crear esto, ¿verdad? Entonces por aquí, lo que voy a hacer es que voy a crear esta función const on submit ¿Bien? Entonces voy a decir const on submit Algo como esto. Oh, lo siento, no enviar, manejar enviar. No está en enviar manejar enviar, algo como esto. Diré evento. Entonces aceptará el evento por aquí, y tengo esta definición de función por aquí, algo así. Bien. Bien, entonces ahora necesito la lógica de aquí para básicamente manejar la solicitud de correos ¿Bien? Entonces lo que voy a hacer es que primero voy a crear un nuevo post, ¿de acuerdo? Ahora bien, cuáles son los datos que necesito enviar es el cuerpo del título y el ID de usuario. Esto es lo que necesito enviar, ¿verdad? Así que voy a copiar esto y voy a venir aquí, bien. Y por aquí, voy a decir const, nuevo post, y voy a tener un post creado, algo así. ¿Bien? Bien. Voy a mantener esto en múltiples líneas. Eso está absolutamente bien. Bien, algo como esto. Bien, entonces esta es la publicación. Esto es lo que yo diría. Este es el objeto que quiero publicar, ¿verdad? Entonces el título es fu, el cuerpo es bar y el ID de usuario es uno. ¿Bien? Ahora bien, lo que podemos hacer aquí es esto después de que se cree esto, voy a tener un eje que se está utilizando. Entonces voy a agregar eje y se puede ver el sttment de importación que se está agregando en la parte superior Entonces vamos a hacer uso del eje. Diré eje punto Post. Bien. Y post es un método del que vamos a hacer uso. Tengo que pasar la URL por aquí, y luego necesito hacer uso de entonces para manejar la respuesta. ¡Uy! Entonces, para manejar la respuesta, algo así. Bien. Entonces por aquí, lo que haría es que necesito el Bien, necesito cerrar esto también por aquí. Bien. Y y voy a deshacerme de este soporte abierto. Bien, cerrando el soporte. Entonces dentro de post, necesito pasar la URL y el nuevo objeto post. Así que voy a venir aquí. Este es el nuevo objeto post. Bien. Entonces voy a mencionar eso por aquí. Y al final, voy a decir coma nuevo post. Entonces este es el objeto que estoy pasando. Bien, algo como esto. Déjame ir a pantalla completa con esto. Todo bien. Voy a ir a pantalla completa para que veas todo. Bien. Se puede ver eje punto post por aquí, y estoy pasando en el nuevo objeto post, junto con esto. Y luego ahora en el entonces, lo que necesito es voy a decir respuesta, bien, función de flecha. Y por aquí, ahora necesito manejar la respuesta. ¿Bien? ¿Cómo manejo la respuesta? Solo diré que el registro de puntos de la consola por aquí, ¿de acuerdo? Y voy a decir nuevo post agregado. Algo como esto, y solo voy a decir datos de punto de respuesta. ¿Bien? Me gusta. Bien entonces voy a decir establecer datos, vaya. Bien, entonces los datos establecidos no existen. Tenemos que agregar un estado por aquí. ¿Bien? Entonces lo que voy a hacer es decir const data, y diré set data Haré uso del estado de uso por aquí. Bien. Y aquí, lo que vamos a hacer es llamaremos set data, algo así. Y por aquí, voy a decir respuesta. Dot data y coma y voy a desestructurar los datos, algo así. Todo bien. Entonces esto está hecho, supongo, bien. No hay problemas como tales. Y sí, manejar enviar también está vinculado a esto. Bien. Así que ahora permítanme minimizar esto. Y aquí, voy a hacer una actualización, una actualización rápida. abriremos la consola, para ver qué salida obtenemos. Y voy a decir añadir post por aquí. Bien. En el momento que digo en el post , vaya, no estoy viendo nada Bien, entonces necesito decir también punto E, prevenir prevenir default, prevenir default. Entonces necesito decir esto, y ahora probemos esto. Bien. Entonces voy a decir post anuncio. ¡Uy! Entonces dice datos no iterables. También estoy recibiendo un error por aquí en la línea 16 por aquí. ¿Bien? Entonces el problema son los datos de punto de respuesta, y estoy desestructurando los datos ¿Bien? Entonces esto está dando error y error es promesa de uncod Los datos no son itraables. Entonces lo que haría es que me desharía de esta cosa de aquí, esto. Bien. Y voy a guardar esto. Déjame hacer un refresco. Bien. Así que me he deshecho de esta parte de aquí. Bien. Esto ahora es bastante sencillo. Voy a decir añadir post y se puede ver, bien, el post que se está agregando y qué post se está agregando que también se está mostrando por aquí. Todo bien. Entonces sí, así es como funcionaría una postsolicitud cuando se trabaja con Axis. ¿Bien? Es bastante sencillo. Solo voy a ir a pantalla completa para que tengas una mejor vista. Sólo voy a acercar un poco. Bien. Estamos haciendo uso. Aquí es donde está el quid, ¿de acuerdo? Entonces dices eje punto post, especifica la URL y el objeto que quieres publicar. ¿Bien? Y entonces tienes el manejo por aquí, y manejas la respuesta que obtienes. Todo bien. Entonces sí, eso es sobre la solicitud de post con eje. Espero que esto haya sido útil y espero que hayan podido seguirlo. 10. Optimiza la seguridad de API con Axios Interceptors: Entonces ahora es el momento de que comencemos a hablar interceptores y entendamos cuáles son Ahora por aquí, tengo un ejemplo ya escrito, en donde tengo este encabezado y un botón para agregar un post, ¿bien? Y cuando haga clic en Add Post, va a hacer una postsolicitud a un servidor remoto, y se puede ver los datos que se están publicando en la consola. Después de la exitosa respuesta de la solicitud de post, ¿de acuerdo? Y verás que esto sucede varias veces. Bien. Estamos haciendo uso de esta API falsa por aquí, que es el marcador de posición de Jason, y si te desplazas hacia abajo, estoy haciendo uso de la API de publicación de aquí Esa es una, ¿de acuerdo? Volviendo al código por aquí, ¿de acuerdo? Esta es la base de código. Ahora bien, ¿qué son los interceptores y por qué los necesitas? ¿Bien? Ahora bien, los interceptores son una cosa con eje que permiten ejecutar código personalizado o interceptar la solicitud, antes de que sea manejada para entonces o catch Espero que esto tenga sentido. Entonces los interceptores no son más que le permiten interceptar la solicitud antes de que sean aceptados para entonces o atrapar, Ahora bien, ¿por qué querrías hacer esto? Por lo tanto, es posible que desee tener algún tipo de código personalizado para ejecutar antes se envíe una solicitud o después de recibir una respuesta. ¿Bien? Ahora, el código personalizado podría implicar hacer cosas como agregar un token de autenticación o algo por el estilo, ¿de acuerdo? Entonces en ese caso, este concepto de interceptores entra en escena, ¿verdad? Entonces déjame darte una demostración de cómo puedes hacer uso de ella. ¿Bien? Entonces aquí en la parte superior, digamos, voy a tener un interceptor Diré eje tot diré interceptores. Se puede ver el interceptor de propiedades y tiene solicitud tot, use ¿Bien? Así que tienes uso por aquí, ¿de acuerdo? Ahora, dentro de uso, lo que harías es, esto es lo que vamos a usar. Por aquí, voy a tener función de flecha. Voy a decir petición. ¿Bien? Por cada solicitud, me das un registro de consola, ¿de acuerdo? El registro de la consola debería estar iniciando la solicitud, ¿de acuerdo? Algo como esto. Bien. Ahora voy a guardar esto, ¿de acuerdo? Ahora bien, si vengo aquí, si abro la consola, déjame despejar la consola. Déjame hacer un refresco. Bien. Ahora si digo agregar post, verás solicitud de inicio. Vaya, aquí hay algún error. ¿Bien? El error dice no atrapado en la promesa, escribe error, ¿de acuerdo? Entonces obtuve el error. El error es que tenemos que devolver la solicitud por aquí. ¿Bien? Ese es un error que cometí. Si vienes por aquí, si refrescas, claro, y si digo en el post, verás iniciar solicitar nuevo post agregado, ¿de acuerdo? Así que recuerda devolver esto por aquí. ¿Bien? Entonces sí, esto será interceptado y esto se imprimirá para cada solicitud de aquí Se puede ver. Por cada solicitud, estás viendo solicitud inicial, ¿verdad? Tienes acceso al objeto de solicitud que puedes imprimir aquí. Entonces puedo decir petición por aquí. Bien. Si vengo por aquí, me refresco, si digo add post, se puede ver que tengo acceso a todo el objeto request por aquí. Puedo agregar o eliminar cualquier tipo de encabezados personalizados que quiera. ¿Bien? Entonces puedo decir pedir encabezados de punto, puedo hacer uso de él de esa manera y puedo personalizar. Puedo agregar puedo agregar cualquier tipo de token. Entonces, por ejemplo, si se autentica algún tipo de solicitud, correcto, y es posible que deba pasar el token desde el almacenamiento local, ¿verdad Ahora bien, donde quiera que estés usando Axis, sería realmente engorroso hacer eso, ¿ Para que puedas tener definido un interceptor. Globalmente. Y siempre que se active alguna solicitud al servidor, puedes tener una lógica por aquí en la que vas al almacenamiento local, obtienes el token que quieres pasar al servidor, y puedes formatearlo aquí y agregarlo al encabezado. Para que puedas establecer encabezados de punto de solicitud, agregar el token y mantenerlo ahí. Entonces lo que pasaría es por cada solicitud, se agrega el token porque eso es por defecto, ¿verdad? servidor lo necesita. Para que no tengas que replicar ese código en todas partes Así es como ayuda, ¿de acuerdo? Y esto es un interceptor de solicitudes. Tengo un interceptor de respuesta que quiero mostrarle también ¿Bien? Entonces eje punto interceptores, punto, sería respuesta, si lo adivinas bien Tienes que decir usar por aquí. Vaya, vamos a decir uso, y vamos a hacer uso de esto, ¿de acuerdo? Y aquí verás respuesta, y puedes tener algo como esto. Harás un registro de consola por aquí. Bien. Se puede decir respuesta. Bien. Uy. Y por aquí, se puede decir respuesta. Así. Bien. Y por aquí, respuesta de retorno. Algo W. Muy bien. Entonces esto es para cada respuesta, también tienes acceso a la respuesta. ¿Bien? Entonces déjame refrescarme. Claro. Diré añadir post. Se puede ver la solicitud de inicio. Tienes el objeto de solicitud, respuesta, tienes los datos de respuesta, y luego estás viendo que esto se está imprimiendo. Ahora bien, ¿de dónde se imprime esto? Esto se está imprimiendo desde entonces por aquí. Se puede ver. Entonces esta cosa entonces se ejecutó al final. ¿Bien? ¿Qué significa esto es? Esto significa que el interceptor es llamado primero cada vez que se recibe la respuesta, y luego los datos son procesados para entonces Se puede ver por aquí. Entonces esta parte se ejecuta primero cada vez que se recibe la respuesta, y esta parte se ejecuta antes de que los datos se envíen al servidor. ¿Bien? Entonces espero que este concepto de interceptor sea claro y espero que tengan un buen entendimiento de cómo funciona esto Puedes jugar con esto y echar un vistazo a los datos que se interceptan, y espero que esto haya sido perspicaz 11. Crea instancias personalizadas de Axios para un mejor control: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar de instancia de eje personalizado. Ahora bien, ¿qué es una instancia de eje personalizada? Entonces aquí estamos haciendo uso del eje, ¿de acuerdo? Pero con axis, puedes crear una instancia de acceso personalizada que sea versión preconfigurada de axis para tu aplicación Y cuando lo creas, puedes establecer opciones predeterminadas como encabezados URL base, cualquier tipo de encabezados predeterminados que necesites, cualquier tipo de configuración de tiempo de espera que quieras que tenga la solicitud en tu aplicación Entonces, todo este tipo de configuraciones globales, se puede con la instancia de eje personalizada y cada llamada a API que toda la aplicación va a hacer a través de todos los componentes va a hacer uso de esa instancia de eje personalizada, ¿verdad? Entonces, por ejemplo, déjame darte un escenario. Entonces aquí tienes esta solicitud de publicación. Podría tener uno más Obtener solicitud por aquí en este mismo componente. Ahora bien, podría tener miles de componentes, ¿verdad? Cientos de componentes, digamos , en ese caso particular, digamos, al menos 50 componentes tienen llamadas API. ¿Correcto? Entonces, si tienen llamadas EPI, vas a repetir toda esta URL por ahí ¿Bien? Esto no es bueno, bien, porque mañana si cambia la URL del servidor , no es buena. Si algún tipo de parámetro cambia, bien, tienes que hacer cambios en todos los archivos de ahí. ¿Bien? Es mejor tener todo el código común relacionado con la configuración para estar en un archivo que si hay algún tipo de cambio, puedas cambiarlo en un solo lugar, y luego es todo lo que se propaga a lo largo, ¿verdad Entonces aquí es donde entra en imagen la instancia de acceso personalizado . Entonces, para crear una instancia de acceso personalizada, voy a mostrarte cómo va a funcionar, ¿de acuerdo? Entonces aquí estamos haciendo un post EPI. Lo que podemos hacer es que podemos decir const API. Puedes llamar a esto como quieras, pero me gusta llamarlo API. Se puede decir eje punto, crear por aquí. ¿Bien? Así es como estamos creando la instancia de eje personalizada, y dentro de ésta, se puede tener toda la configuración definida. ¿Todo bien? Ahora, qué configuración puede tener por aquí. ¿Bien? Entonces por ejemplo, aquí para esta cosa, lo que puedo hacer es que pueda conseguir esto. He cortado esto y por aquí, voy a decir p URL. Se puede ver el PACerL. Se puede decir dos puntos, puedo agregar un PRL por aquí, algo así ¿Bien? Uy. Entonces no backticks, voy a tener esto Bien. Esta es la URL base para todas las solicitudes API. ¿Bien? Entonces puedo tener cabeceras por aquí. Se puede ver esta propiedad headers. Puedo decir en encabezados, quiero que los encabezados predeterminados de aquí sean como todos los encabezados predeterminados que puedas tener. Entonces digamos que quiero tener autorización por aquí, bien y deseo tener, digamos, portador y puedes agregar alguna ficha por aquí, ¿de acuerdo? Entonces, sea cual sea el token que tengas, puedes agregarlo. Bien, y enviado se envía junto con la API, ¿de acuerdo? Esto lo has definido. ¿ Cómo se hace uso de esto? ¿Bien? Entonces lo que puedes hacer es aquí, en vez de hacer uso de axis dot post por aquí, puedes decir API, algo así, api dot post, y esto va a funcionar, va a hacer uso de esto como el BCRL y va a asegurarse de que estos encabezados estén presentes, por ejemplo Si guardo esto y si vienes por aquí, Bien, tengo esta aplicación en funcionamiento. Bien, tienes este botón por aquí, que activará una solicitud de publicación. Ahora bien, si digo añadir post, bien, se puede ver que se está agregando nuevo post. Bien. Entonces no estoy viendo Esto está funcionando bien, pero no estoy viendo que se imprima la solicitud por aquí. ¿Bien? Entonces eso es algo que puedo imprimir. ¿Bien? Déjame imprimirlo también, ¿de acuerdo? Entonces, para que se imprima la solicitud, lo que voy a hacer es agregar interceptar por aquí, ¿de acuerdo? Entonces agregamos interceptores de esta manera, eje, interceptores, solicitud de punto, uso Tt por aquí, algo como ¿Bien? Así es como normalmente se agregan interceptores Bien. Pero como estamos haciendo uso de instancia de eje personalizado, lo que puedes hacer es en lugar de axis por aquí, dirás interceptores de punto api ¿Bien? Eso es lo que vas a hacer. Todo bien. Y aquí, vas a decir petición por aquí. Bien. Y por aquí, necesitas imprimir la solicitud. Diré consola dot log por aquí. Diré a petición inicial. Bien. Solicitud de inicio. Por aquí. Y puedes agregar el objeto request por aquí, algo así. ¿Bien? Esto está hecho. Ahora bien, si vienes por aquí, bien, déjame refrescarme. Si digo añadir post, vaya , así que conozco este error Todo bien. También tengo que devolver la solicitud, ¿de acuerdo? Solicitud de devolución. Bien. Ahora debería funcionar bien. Un refresco de fuego. Si digo post anuncio, verás que se está imprimiendo la solicitud. Ahora bien, si amplías esto, deberías ver que cuando se envió la solicitud, hay un encabezado de autorización. Este es el encabezado de autorización que agregamos a través de la instancia de eje personalizado aquí se está agregando, y se está enviando al servidor. Puedes tener algún tipo de lógica por aquí en la que busques, ya sabes, algún tipo de token y todo eso, puedes exhibirlo, ¿de acuerdo? Entonces esto es realmente útil de alguna manera, ¿verdad? Y, si, esto es lo que es. Así es como puedes realmente así es como en realidad puedes tener una configuración separada de tu código. Ahora, me gustaría pasar algo de luz sobre cuándo debes usar instancia de eje personalizada y cuándo debes usar interceptores, ¿de acuerdo? Entonces digamos que si estás enviando un token, bien, puedes agregar una configuración de token aquí en la instancia del eje personalizado también, y puedes agregar un token aquí en el interceptor también Así que siempre que se envíe una solicitud al servidor, justo antes de que se envíe, puede agregar un token por aquí. ¿Bien? Entonces, ¿cuándo usar qué método, verdad? Ahora bien, si tu token o configuración es estática, cualquier tipo de configuración que sea estática, Bien, y no requiere un cambio, entonces puedes agregar esa configuración a la instancia de eje personalizada por aquí. ¿Bien? Por ejemplo, podrías tener un por ejemplo, podrías tener una especie de código o podrías tener una especie de encabezado que quizás quieras pasar por aquí, que dice tipo de contenido. Bien, entonces puedes decir tipo de contenido por aquí. Entonces este tipo de contenido encabezado, bien, esto significa aplicación JSN Bien. Entonces este tipo de encabezados que son estáticos, básicamente, esos pueden ir en la instancia de acceso personalizado. Pero hay requisitos en los que podrías tener encabezados que son dinámicos. Ahora lo que quiero decir con encabezados dinámicos es, digamos que quieres agregar un encabezado, bien, que contiene el token que se obtiene del almacenamiento local Ahora, el token de almacenamiento local podría actualizarse de vez en cuando Podría tener una caducidad. No es estático. Puede que no sea estático, ¿de acuerdo? Entonces en ese caso, justo antes de que se envíe la solicitud, es posible que desee ejecutar un fragmento de código para verificar qué es un token, obtener ese token y enviarlo junto con la solicitud, ¿de acuerdo? Entonces en este escenario, hará uso de encabezados que se agregan en el interceptor porque esto no es estático Esto es dinámico, ¿verdad? Y justo antes de que se envíe la solicitud, quieres que se haga la verificación de tokens, ¿de acuerdo? Entonces aquí es aquí donde podrían entrar en uso los interceptores, ¿verdad? Manejo automático de errores. Por lo que los interceptores son excelentes por haber manejado globalmente las respuestas por errores. ¿Bien? Entonces, si tu respuesta EPI indica que un token ha caducado, por ejemplo, 401 no autorizado Un interceptor puede tener el token de actualización automáticamente. Bien, debería poder tener el código para refrescar el token automáticamente y volver a intentar la solicitud Entonces aquí estamos teniendo el interceptor de solicitud. Se puede tener un interceptor de respuesta, en donde se puede verificar si el error fue 401 Si era 401, solo tienes el código para refrescar el token y volver a intentarlo Bien. Entonces esto es algo que no puedes hacer con la instancia de eje personalizada por aquí, ¿verdad? Porque esto es estático, ¿verdad? Y, sí, esta es la diferencia entre la instancia de eje personalizado y el concepto de interceptor ¿Bien? Puede parecer que muchos de mis alumnos sienten que hay una superposición en el concepto, pero ambos son distintos. Eso es lo que estoy tratando de destacar. ¿Bien? Entonces espero que esto haya sido perspicaz y espero que hayan podido seguirlo Bien, así los veré a todos. 12. Supercarga las instancias personalizadas de Axios con interceptores: Entonces ahora lo que haríamos es desarrollar aún más esta instancia de eje personalizado. ¿Bien? Y lo que haría es primero que nada, mover esto a un archivo separado. ¿Bien? Entonces este código puede llegar a ser un poco complejo. Entonces lo que haría es cortar esto por aquí. Vendría a mi estructura de proyecto y crearía una carpeta por aquí. Yo llamaría a esta carpeta como puedes llamar a esta carpeta como API. Se puede llamar a esto como Utils, algo así. Bien. Y por aquí, puedes tener api dot has. Y aquí, puedes pegar todo este código. Bien. Y así se necesita esto por aquí, eje de importación. Entonces eso es algo que voy a mover aquí en este archivo. Bien. Y necesitamos exportar la API. Entonces voy a decir export o default, y voy a decir API por aquí. Bien, algo como esto. Todo bien. Esto está hecho. Bien, API se exporta. Y ahora nosotros aquí, lo que tenemos que hacer es que voy a introducir esta API. Entonces puedo ingresar esto. Bien. Puedes ver la API de Utils, ¿ok Bien, entonces por alguna razón, no me gusta este nombre de carpeta Utils, así que solo cambiaré esto a API también Bien. Y voy a actualizar las entradas, ¿no? Entonces sí, ahora se ve bien. Entonces lo que he hecho es que tengo esta carpeta EPI dentro de la cual he organizado mi pat Js. Y ¿qué es pi dot Gs? Consiste en toda la configuración junto con los interceptores para la instancia del eje personalizado de aquí ¿Bien? Y puedes usar esto donde quieras. ¿Bien? Entonces así es como lo estamos usando. Y si vienes por aquí y si me refresco, bien, si dices en Post, verás que está funcionando absolutamente bien. Bien, así que esto ha hecho nuestro código sea un poco más modular. Derecha. Ahora lo que podemos hacer es que podemos mejorar en esto de aquí. ¿Bien? Entonces estamos pasando en esta cabecera. Bien. Voy a deshacerme de esta cosa simbólica de aquí. Bien. Digamos que tenemos el concepto de token dinámico por aquí, ¿verdad? Entonces lo que podemos hacer es por aquí, tengo esta petición. ¿Bien? Estoy teniendo esto. Y aquí, puedo añadir una función más. Puedo decir Cfico, algo así, y voy a añadir una función de flecha así Bien. Y por aquí, puedo decir const token Bien. Puedo conseguir el token, almacenamiento local, punto Obtener artículo. Voy a sacar el token de mi almacén local, así que voy a decir token por aquí. Bien. Y entonces realmente puedo decir si se encuentra token, si token, entonces ¿qué harías? Entonces dirías config tot headers. Entonces puedes llamarlo config o puedes llamarlo request. Eso está absolutamente bien. Entonces aquí lo estoy llamando una solicitud, así que lo estoy llamando como config por aquí. ¿Bien? Entonces estoy diciendo config dot headers dot autorización. Sesión, o es igual a. Puedo agregar una ficha pairer. Entonces puedo decir pairero necesito agregarlo en este formato. Puedo decir token. Algo así. Todo bien. Entonces token se agregará solo si se encuentra el token, ¿verdad? Si el token no se encuentra en el almacenamiento local, éste se guarda. Bien. Entonces esto se haría. Y si vienes por aquí, ¿de acuerdo? Entonces de brazos cruzados, no se agregará el token porque no hay almacenamiento local en este momento, ¿de acuerdo? Entonces no es arte, ¿verdad? No es difícil en los encabezados. Veamos. No es agregar. Se puede ver porque no tengo nada almacenado en almacenamiento local para esta aplicación en este momento. Pero si tienes, si lo estás almacenando, entonces lo conseguirás y podrás enviarlo por aquí. ¿Bien? Ahora por aquí, esto está hecho. Lo que puedo hacer es que incluso puedo manejar, incluso puedo agregar algún tipo de manejo de errores por aquí. Entonces puedo decir error. Algo como esto, y puedo decir, vaya, así puedo decir Error de punto de consola Bien. Y por aquí, puedo decir error de solicitud, error de solicitud, y nuestro espacio, se puede decir error. Todo bien. Y se puede decir promesa de devolución, rechazo de punto. Estoy manejando estoy rechazando los errores de solicitud. Oh, bien. Diré errores. Bien, algo como esto. Bien. Lo que estoy haciendo es que estoy manejando el error de solicitud usando esto, bien. Y esta es una manera, bien. Entonces incluso se puede agregar el interceptor de respuesta. Esto es todo sobre el interceptor de solicitudes, hasta aquí. Lo que puedo hacer por aquí es que puedo decir respuesta de punto EPI. Oh, 1 segundo. Interceptores de punto pi respuesta de punto, p interceptores de punto respuesta de punto, punto U.Esto es lo que es Todo bien. Y ahora dentro de esto, necesitamos agregar la función de flecha. Entonces lo que haríamos es yo diría respuesta, algo así. Bien. Y puedes agregar algún tipo de manejo por aquí. ¿Bien? Ahora lo que manejaríamos agregaríamos es que podemos decir si la respuesta es exitosa, simplemente devolveríamos los datos. Entonces respondo, luego devuelvo los datos, ¿no? Entonces diremos Bien, respondo, esto ya está escrito. Entonces si respuesta, entonces devuelve respuesta. Bien, entonces no voy a agregar lógica por aquí. Puedes tener tu propia lógica básicamente para. Pero así es como lo manejarías por aquí. Ese es el propósito, ¿de acuerdo? Para que puedas tener éxito revisa aquí la respuesta y luego regresa a Tita. ¿Bien? Entonces estás devolviendo la respuesta esencialmente. ¿Bien? Si hay algún error, ¿cómo manejarías eso? Bien. Entonces por aquí, simplemente puedes venir y puedes decir, bien, déjame agregar una pestaña por aquí. Bien. Y ahora se puede decir por aquí, error. Bien. Entonces esto es un error, y entonces se puede decir así. Y por aquí, se puede decir si puedo decir error punto punto respuesta. Bien. Y así estoy comprobando la caducidad del token y cualquier otro error a nivel global. ¿Bien? Entonces puedo decir error, punto, respuesta, estado de punto por aquí. Vaya, estado por aquí. Y si es igual a 401, bien, puedes agregar cualquier tipo de, ya sabes, cualquier tipo de manejo por aquí. Se puede decir error de punto de consola, algo de ese tipo, y se puede decir no autorizado. Algo así. Bien. manejarlo por aquí y también puedes agregar la lógica de rejuicio dependiendo del tipo de errores que estés obteniendo Bien. Si estás obteniendo 500 errores, bien, como error interno del servidor o algo así, así puedes agregar uno más por aquí y puedes decir una comprobación más. Se puede decir si el error es 500. Bien, entonces puedes decir error del servidor. Así que básicamente estoy haciendo un registro por aquí, pero puedes manejarlo de la manera que quieras, ¿de acuerdo? Voy a añadir punto y coma Bien, y voy a añadir corchetes redondos por aquí. Bien. Entonces creo que esto es bastante claro en cuanto a cómo esto puede ayudar por aquí. Bien. Y una vez hecho esto, bien, todo esto está hecho, puedo decir devolución promesa punto check por aquí, y puedo decir error. Todo bien. Entonces estás rechazando otros errores básicamente Todo bien. Entonces sí, así es como puedes seguir desarrollando la instancia de eje personalizada. Y esta puede ser la API personalizada que tiene los pits personalizados, que es tener la configuración global para las solicitudes de API que estás haciendo, incluyendo las BaseURLs Entonces, si estás obteniendo las URL base del archivo ENV, puedes tener esa lógica por aquí, ¿de acuerdo Y puedes administrarlo por separado del archivo ENV. ¿Bien? Encabezados mañana si se están agregando nuevos encabezados, ¿de acuerdo? Así que recuerda, por aquí, no estás codificando duro la URL, no estás codificando los encabezados Solo estás haciendo uso de la API, y toda la lógica relacionada con el componente que está por aquí, ¿de acuerdo? Sólo la lógica relacionada con el componente está por aquí, no otra cosa. Mañana, si algo cambia en la API, si se necesitan encabezados, tienes que hacer el cambio en un solo lugar, ¿de acuerdo? En esta instancia, este pi dot js se utilizará en todos los lugares. Entonces mañana si tienes 50 componentes, esto es lo que se va a usar en 50 componentes. Así que no tienes que hacer cambios en los 50 componentes, lo manejas una vez y está cuidado. Bien. Entonces sí, así es como funciona esto. Y espero que esto sea que estés encontrando la utilidad de esto por aquí. Todo bien. Entonces sí, eso es sobre este eje personalizado instintos e interceptores, cómo se pueden fusionar y trabajar Y espero que esto te haya resultado útil. 13. Conclusión del curso: Y eso nos lleva al final de este viaje transformador hacia el mundo de la integración del EPI en reaccionar Bueno, hemos explorado cómo la integración de API en su aplicación puede ser un cambio de juego en creación de aplicaciones dinámicas impulsadas por datos Nos adentramos en lo fundamental de hacer llamadas API, entregar carga y errores, y mejorar la seguridad mediante integración de instancias de acceso personalizadas e También hemos aprendido y explorado cómo puedes hacer múltiples llamadas API simultáneamente, y ahora has adquirido las habilidades necesarias para elevar tus proyectos de reacción. Pero recuerden, la exploración no termina por aquí. Te animo a que sigas experimentando, explorando y superando los límites de lo que es posible con los EPI en tu aplicación de reacción Me emociona ver cómo vas a utilizar estas habilidades y conocimientos que has adquirido para potenciar tus proyectos de desarrollo web Recuerde, la innovación consiste adoptar nuevas técnicas y tecnologías, y la integración de EPI o trabajar con EPI es una parte fundamental de su kit de herramientas de desarrollo Gracias por ser un grupo de alumnos tan comprometido y entusiasta. Espero que este curso no solo te haya equipado con nuevas habilidades técnicas, sino que también te haya inspirado a pensar creativamente sobre la construcción de aplicaciones web robustas Con esta clase, encontrarás un proyecto de clase que te animaría a completar y compartir en la sección de proyectos con toda la clase. Me gustaría desearle buena suerte y todo lo mejor.