Axios/fetch Para realizar peticiones HTTP y consumir la Rest API de Vue 3 A CodeIgniter 4- 06

Explicación a los fetch en JS para consumir peticiones HTTP.

Lo siguiente que tenemos que hacer finalmente es hacer una petición a nuestra aplicación en CodeIgniter 4 y hago aquí esta comparación ya que fíjate que son dos proyectos apartes cosa que no es ninguna novedad pero que es importante aquí introducirlo recordarlo para lo siguiente que vamos a ver que es un mecanismo que tenemos en javascript otra vez en javascript nativo en vanila javascript para poder comunicar cualquier proyecto en este caso una apires cuyo el propósito Es recordando un poco poder como quien dice interconectar aplicaciones en este caso nuestra aplicación en CodeIgniter 4 con una aplicación en Vue pero tal cual te comentaba la app puede estar implementada en cualquier cosa y esto son parte de las ventajas de una Api Rest que independientemente de la tecnología que esté por detrás la podemos utilizar para o es el mecanismo que podemos utilizar para poder interconectar aplicaciones y estas aplicaciones pueden ser perfectamente una aplicación en Vue que es lo que tenemos por acá puede ser una aplicación en Flutter una aplicación en Android nativo con Android Studio en scoute en React en Angular o cualquier cosa que inventen por ahí es así de simple 

Entonces esto es aclarando un poquito el propósito y cómo podemos hacer esto bueno básicamente haciendo peticiones http básicamente cuando estamos aquí viendo esta nuestra Api desde el navegador estamos haciendo una petición http de tipo get mediante el navegador esto no tiene que ser ninguna sorpresa porque nosotros la configuramos de esta forma Así que básicamente tenemos que hacer lo mismo desde nuestra aplicación en Vue pero por suerte ya el Api de javascript y otra vez de javascript no tienen absolutamente nada que ver con Vue ya cuenta con un mecanismo con el cual podemos hacer este tipo de peticiones que son los famosos fetch que tenemos por acá que no es más que una función en la cual configuramos la ruta y otros parámetros adicionales que vamos a ir conociendo poco a poco y que nos permiten hacer esta comunicación de esto nos ocupamos en la siguiente clase en la cual vamos a hacer nuestra primera comunicación o consumir nuestra Api de momento lo que quiero es hacer una sencilla comparación ver una estructura y también compararlo con otra cosa llamada acos que es básicamente lo mismo que los fetch pero un poquito más optimizado y que no forma parte de lapide de javascript si no la tenemos que instalar pero eso también lo vamos comparando aquí un poquito entonces vamos a ver cómo luce una petición aquí de tipo fetch para eso puedes buscar aquí fetch javascript aquí tienes: 

fetch('http://code4movies.test/api/pelicula')

Se configura o luce de la siguiente forma Fíjate que colocamos fetch la URL o la ruta que tiene que ser completa porque son aplicaciones independientes es decir por una parte aquí tenemos la aplicación en coding 4 Esta es la url y la de Vue al menos para el servidor de desarrollo no sé si lo levantamos de igual manera manera ahorita vamos para eso sería algo así como local Host 8080 y por ahí va entonces son dos rutas completamente distintas porque son dos aplicaciones completamente distintas entonces aquí importante colocar toda la ruta en este caso sería esta para la primera que vamos a consumir luego a partir de aquí vemos unas cositas un poco extrañas punto también importante puede que en php no lo veamos tan claramente pero cuando nosotros escapamos del ámbito de la aplicación entiéndase de que vamos a un archivo también depende aquí muchísimo el tamaño del archivo o vamos a hacer una petición mediante http estamos escapando un poco del ámbito de la aplicación y por lo tanto en esos escenarios son peticiones de tipo asíncronas otra vez a veces en php eso no se ve tanto porque lo encapsula por detrás Por decirlo de alguna forma pero en JS esto es un poquito más evidente recuerda también que estamos trabajando con dos lenguajes de programación 

Por una parte php y por otra parte javascript por lo tanto ahora nos tenemos que adaptar a lo que sería cómo funciona javascript que en este caso es mediante peticiones asíncronas por lo comentado antes porque desde el lado o desde el punto de vista de javascript no estamos abriendo un archivo sio es estamos haciendo una petición http entonces otra vez como te comentaba antes cualquier petición http va a ser de tipo asíncrona y para resolver esto de tipo  desde javascript tenemos varias formas una de ellas es mediante las funciones de promesa que es la configuración que estás viendo por acá que es la que vamos a trabajar principalmente y no quiero como quien dice mencionar más para no complicar la cosa pero lo que hace esto es cada vez que tengamos una petición de tipo asíncrona por lo comentado antes esto lo que hace es que se resuelve cuando se tenga que resolver es decir otra vez si tuviéramos un archivo para que también lo veas un poco más de simplemente cinco líneas sería algo bastante rápido de leer pero qué pasa si ese archivo que tenemos que abrir y leer tiene 5,000 páginas obviamente sería muy distinto por lo tanto es que es una petición de tipo asíncrona porque realmente no se sabe cuánto tiempo se va a tardar ya que depende de muchos factores como la velocidad del disco como la velocidad del servidor el tamaño del archivo la la complejidad del archivo el formato del archivo muchas cositas que están por ahí entonces es por eso que son de tipo asíncronas y aquí sucede un poco lo mismo si es una petición Bueno si por ejemplo el servidor tiene una conexión rápida con internet va a resolverlo más o menos rápido y si la que está consumiendo no tiene mucho contenido es decir no pesa tanto en by o kilobit lo va Lo va a resolver mucho más rápido que si fuera mucho más grande es decir que si aquí por ejemplo devolvi qué es lo que estamos devolviendo creo que son como 20 resultados sería más o menos rápido pero qué pasa si no son 20 resultados si no son 5,000 resultados obviamente se va a tardar mucho más y es por eso que es asíncrono Entonces espero que haya quedado en contexto un poco lo que es el fech que es la forma en la cual tenemos para hacer peticiones http colocando aquí a qué lo queremos qué queremos con consumir y también porque aquí tenemos un den que es para resolver funciones de promesa o para resolver una promesa

console.log(fetch('http://code4movies.test/api/pelicula'))

Veremos que imprime <PROMISE> por lo mencionado antes; adicionalmente, veremos un error como el siguiente:

Access to fetch at 'http://code4movies.test/api/pelicula' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Una promesa no es más que una petición asíncrona que puede ser cualquier cosa en este caso es una petición http Y qué es lo que estamos haciendo aquí esto ya depende un poco de la respuesta pero en este caso como es una Rest Api y por excelencia devolvemos lo que es xml o JSON pero usualmente empleamos JSON lo que está haciendo es castear la respuesta a un JSON así de simple por lo tanto antes de procesar la respuesta ya luego vamos a ver qué nos imprime aquí exactamente pero eso es lo que está haciendo convertir la respuesta a Jason para que lo podamos manejar más fácilmente y esto es más o menos lo mismo como es un proceso que puede no sabe cuánto puede tardar Porque si es una respuesta pequeña entonces lo resuelve más o menos rápido pero si son 10,000 registros entonces va a tardar un poquito más es por eso que es de tipo asíncrona y tenemos que hacer otra función de promesa y aquí finalmente tenemos el resultado no te preocupes si no me sigues mucho recuerda que puedes ver este video en el orden que tú quieras al igual que los anteriores por si tienes alguna duda que son un poquito introductorios si son un poquito abstractos bien estos 

Fetch y axios

son los fetch pero por otra parte también tenemos el axios que lo veremos un poco más adelante me gustaría ya introducirlo de una vez para no forzar esto tanto básicamente los axios es más o menos lo mismo que tenemos con los fetch pero nos podemos arrar un poquito para esto aquí voy a ir rapidito a este a este post en la cual está comparando ambos hay muchas ventajas y desventajas y puedes hablar muchas cositas sobre ambos cualquier cosa puede buscar más información en internet pero para mí básicamente tiene dos ventajas Por una parte no te preocupas de lo que es la integración que tenemos de forma nativa es decir puede que en algunos navegadores los fech todavía no lo hayan implementado Aunque sería un poco raro pero puede que eso suceda Así que empleando los acos que es una una biblioteca que instalamos adicionalmente nos quitamos ese problema porque como es una biblioteca que instalamos a nivel de nuestra aplicación Sí o sí va a tener un soporte al uso de acos entonces ahí tenemos como quien dice la primera ventaja que vamos a tener soporte sin importar el navegador la siguiente ventaja es que también tenemos una configuración un poco más sencilla ya que vamos a ver un poco más adelante cuando empleamos los fetch que se complica un poquito la sintaxis también indicando el tipo de petición si es que post delete y también que no tenemos que hacer el casteo en acos no tenemos que hacer este casteo entonces básicamente para mí son esas las principales ventajas en resumen que tenemos un soporte no importa de dónde se esté consumiendo la aplicación no nos preocupamos si está implementada o no como en el caso de los fch y que tenemos una sintaxis más sencilla más elegante y no tenemos que hacer casteos aom así que en resumen es eso para concluir o para hacer un pequeño resumen de todo los fetch son las formas que tenemos en javascript para consumir peticiones http que por definición al ser peticiones http son de tipo asíncronas es decir no se sabe cuándo puede terminar cuando comienza y cuando termine y por lo tanto las podemos resolver mediante funciones de promesa y para esto aquí tenemos la siguiente sintaxis ya la siguiente clase vamos a vamos a intentar consumir la primera petición la que tenemos por acá Bueno el primer recurso así que vamos allá

05-02-2025 - Andrés Cruz

In english

• Categoría
• /
• CodeIgniter
• /
• Axios/fetch Para realizar peticiones HTTP y consumir la Rest API de Vue 3 A CodeIgniter 4- 06