Testing with fetch in Vue and CodeIgniter app 4 - 09
Let's run some tests with the fetch.
By the way, one little thing that is added to this that it took me a while to create this section to consume the RestAPI from CodeIgniter 4 precisely because of this because as there was no official way to configure it then it clashed a little bit to simply do this type of implementations as I showed you here anyway now that was the only thing I wanted to tell you there well now we are going to do some tests with this here I have already told you a little about the problem we have here and that is that from anywhere now the application could be consumed which usually is not what we want since if anything we want it is for the API to be open but this way I think it becomes quite complicated for us but with the configuration that we have at the level of CodeIgniter 4 since 4.5 as they comment here:
https://codeigniter.com/user_guide/libraries/cors.html
That should not happen anymore since we can filter it based on a route that in this case would be ap anything but we do that later so for now I want to do some tests with the fetch to see how it goes and to understand this a little better making a small summary remember that with the fetch we can make an http request that by its definition has to be external to the application is asynchronous understand that it can take a few milliseconds or it can take a few seconds or it may simply not be resolved because for example there is no Internet or the application went down or whatever then that is why it is asynchronous around here what we are doing which is an important point that I also do not limit is that we are making as if it were chaining functions removing this one here what is happening is that this function is executed after this function:
fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))And the input that we have here from this function is the return that we have here, that is, they are chained, notice that if for example I comment this here we will have a generic response as you get stuck and here you had to cast this to a JSON in order to use it but it is important that you also notice what the response is like, that is, again here we are simply printing a response without doing a subsequent or previous process, better said, so this is how the response looks like, we have a status 200, Okay, the guy, well, the guy, I don't know what he says withs but anyway the route and here we supposedly have the Data but it is in vite and there we have problems and that is why you cast it and what you can see here:
fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))With this we don't do much and that's why we convert it to a json since it's the format we're using to share the Data, so several little things once we have the response here is what the input here is, that is, this wouldn't work without this as we're seeing and a bit the same here if you leave it this way then you're not doing anything because you're simply making a request and you leave it there, which doesn't make sense, so again this is chained, interesting little things
It's important to handle requests to handle when the response is not correct, for that, we'll use the catch:
fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))
.catch(error => console.log(error)) - Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter