Pruebas con los fetch en la app de Vue y CodeIgniter 4 - 09
Vamos a realizar algunas pruebas con los fetch.
Por cierto una cosita que es aunado a esto que yo me tardé un poco en crear esta sección para consumir la RestAPI desde CodeIgniter 4 precisamente por esto porque como no había una forma oficial de configurarla entonces me chocaba un poquito simplemente hacer este tipo de implementaciones como te mostraba por acá en fin ahora Era lo único que te quería comentar ahí bueno ya vamos a hacer aquí algunas pruebas con esto ya te he comentaba un poco también el problema que tenemos acá y es que desde cualquier parte ahora se pudiera consumir la aplicación que usualmente eso no es lo que queremos ya que si acaso queremos es que la Api este sea la abierta pero de esta forma creo que se nos complica bastante pero con la configuración que tenemos a nivel de CodeIgniter 4 desde la 4.5 según comentan acá:
https://codeigniter.com/user_guide/libraries/cors.html
Ya eso no debería suceder ya que la podemos filtrar en base a alguna ruta que en este caso sería ap cualquier cosa pero eso lo hacemos luego entonces de momento quiero hacer algunas pruebas con los fetch para ver qué tal nos va y para entender esto un poco mejor haciendo un pequeño resumen recordemos que con el fetch podemos hacer una petición http que por su definición ha ser externa a la aplicación es asíncrona entiéndase que puede tardar unos milisegundos o puede tardar unos segundos o simplemente puede que no se resuelva porque por ejemplo no hay Internet o se cayó la aplicación o qué sé yo entonces es por eso que es de tipo asíncrona por aquí lo que estamos haciendo que es un punto importante que también no acote es que estamos haciendo como que funciones encadena quitando esta por aquí lo que está sucediendo es que esta función se ejecuta luego de esta función:
fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))Y la entrada que tenemos aquí de esta función es el retorno que tengamos acá es decir se encuentran encadenadas fíjate que si por ejemplo esto lo comento acá vamos a tener es una respuesta genérica tal cual te trabantes y aquí tuvos que castear esto a un JSON para poder utilizarlo pero es importante que también notes cómo es la respuesta es decir otra vez aquí simplemente estamos imprimiendo una respuesta sin sin hacer un proceso posterior o anterior mejor dicho así que esto así luce la respuesta tenemos un estatus 200 el Okay el tipo bueno el tipo no sé qué dice cons pero en fin la ruta y aquí supuestamente tenemos la Data pero se encuentra en vite y ahí tenemos problemas y es por eso que lo casteos y lo que puedes ver por acá:
fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))Con esto no hacemos mucho y es por eso que lo convertimos a un json ya que es el formato que estamos empleando para compartir la Data entonces varias cositas una vez tengamos aquí la respuesta es lo que es la entrada de acá es decir esto no funcionaría sin esto tal cual estamos viendo y un poco lo mismo por acá si lo dejas de esta forma entonces no no estás haciendo nada porque simplemente estás haciendo una petición y lo dejas ahí cosa que no tiene sentido entonces otra vez esto está encadenado cositas interesantes
Es importante manejar peticiones para manejar cuando la respuesta no es correcta, para eso, usarmos el catch:
fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))
.catch(error => console.log(error)) - Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter