Esperemos que funcione para ti. Debería. Perfecto. Bueno. Entonces, en primer lugar, vamos a hablar de esto, las solicitudes básicas. Luego hablaremos del estado y de las características
advanced como la paginación y otras cosas de las que hablé anteriormente. Así que, cuando estamos obteniendo
data, no importa, puede ser
React, puede ser
Angular, lo que quieras, normalmente tenemos tres opciones de cómo podemos obtener
data de un punto final remoto. Primero, el antiguo es XMLHttpRequest. Nadie lo usa en estos días, creo, en su forma cruda porque tenemos Axios y tenemos Fetch API. Ahora, XMLHttpRequest es algo que funciona en todos los navegadores porque esta fue la primera implementación. Axios y Fetch API son ligeramente diferentes, pero todos hacen lo mismo, solo quieren hacer la obtención de
data más fácil y mejor para los desarrolladores. Ahora, Axios... cuando hablamos de las solicitudes y respuestas crudas, tenemos dos opciones, prácticamente Axios y Fetch API. La diferencia es que Fetch API, ves, es realmente fácil de usar. Esto es lo único que necesitas hacer. La mayor desventaja, o podrías llamarlo la desventaja, es que no está disponible en todos los navegadores, pero de lo contrario es una API nativa, así que no tienes que instalar ningún paquete, no tienes que hacer nada. Está todo... ya está disponible en todos los navegadores. Así que Fetch API es algo que deberías estar usando por defecto, y aunque no está disponible en todos los navegadores, y por todos los navegadores, quiero decir Internet Explorer versión 11. Si necesitas, ya sabes, trabajar en proyectos que tienen que soportar este navegador, lo siento por ti, pero hay un polyfill que puedes usar para realmente traer la funcionalidad Fetch a esos navegadores también, ¿sí? Así que esta es también una solución si quieres usar Fetch. Ahora, esta es una captura de pantalla de ¿Puedo usar? Ves que es prácticamente todo verde, solo el Internet Explorer aquí, pero de lo contrario, todos los navegadores actuales y móviles, y también
Node.js, soportan Fetch API por defecto, y no tienes que instalar nada. En
Node.js, el soporte llegó a principios del año pasado. Así que tienes que usar
Node.js al menos 17.5, pero eso debería ser siempre el caso en estos días. Y como mencioné, no hay necesidad de plugins extra. Ahora, por supuesto, normalmente puedes manejar el 85-90 por ciento de todos los casos con solo Fetch API. Puede haber algunos casos en los que vamos a necesitar un poco más que eso. Pero eso me lleva a la primera tarea que tengo para ti. Y eso es realmente empezar a trabajar en la aplicación y verla en funcionamiento. Así que la primera tarea es añadir la siguiente llamada Fetch al componente slash Fetch TSX. Te voy a mostrar cómo hacerlo. Así que cuando abrimos el Visual Studio, hay un componente bajo fuente y componentes llamado Fetch TSX. Y ves que está mostrando algunos errores porque falta una llamada Fetch. Así que vamos a usar eso. Vamos a añadir eso aquí. Asegúrate de mantener las respuestas S, blah blah blah allí porque todavía está utilizando los
data tipados del CMS. Y vamos a hacer aquí await Fetch. Y aquí ves que sólo necesitamos proporcionar la URL del punto final, ¿sí? En este caso, si estás utilizando el punto final remoto, va a ser la URL en Netlify. Y por supuesto vamos a tener que resolver el JSON aquí. Así que, algo así debería funcionar. Así que en primer lugar, estamos esperando fetch, sólo el fetch. No necesita ninguna importación, nada. Es sólo el fetch. Estamos obteniendo la URL. Y luego estamos haciendo otra espera para JSON. Así que necesitamos convertir la cadena en un objeto. Por eso estamos haciendo JSON aquí. Por supuesto, podríamos hacer con, no tenemos que usar async await. Podríamos hacer con promesas hacer un punto entonces y así sucesivamente. Yo prefiero esta notación ya que parece un poco más clara. Pero esa será la primera tarea para ti hacer esto. Y cuando se guarda, puedes volver al apt-tsx. Y como mencioné antes, justo antes de la etiqueta de cierre de la tabla, pon el componente allí. Y por supuesto, no hay importación, así que va a querer esa importación de nosotros. Sí, añade importación de componentes y fetch. Y guarda eso. Ahora, siempre estaba usando el defy def, pero creo que
NPM run-def debería funcionar también. O no. Bueno, tal vez
NPM run start. Déjame comprobar. Déjame comprobar. Sí,
NPM run start debería funcionar. Bueno, y los primeros, los primeros problemas, sí, hay componentes que no le gustan porque no puede compilarlos, así que podríamos necesitar comentarlos. XCLS, XCLS,
React query.
React query. Así que, si estás usando esto, si estás usando
NPM run start, probablemente no vamos a tener que cambiar eso. Si tienes instalado netlify-cli, si ejecutas netlify-def, creo que funciona, aunque haya problemas, pero déjame comprobar. De lo contrario, vamos a tener que renombrar los archivos para que no los tome como archivos
TypeScript. Sí, a él tampoco le gustan. Bueno, lo siento por eso. Estamos, ese es un paso más que tenemos que hacer. Así que, los archivos que no pueden ser compilados, vamos a tener que renombrarlos.
NPM run start. ¿Están arriba? Oh, esto me dirá cuáles son.
Comments