Axios/fetch To make HTTP requests and consume the Vue 3 Rest API A CodeIgniter 4-06
Explanation of fetch in JS to consume HTTP requests.
The next thing we have to do is finally make a request to our application in CodeIgniter 4 and I make this comparison here since notice that they are two separate projects, which is nothing new but it is important to introduce it here, remember it for the next thing we are going to see that it is a mechanism that we have in javascript again in native javascript in vanilla javascript to be able to communicate any project in this case an apires whose purpose is to remember a little to be able to, as they say, interconnect applications in this case our application in CodeIgniter 4 with an application in Vue but as I was telling you the app can be implemented in anything and this is part of the advantages of a Rest Api that regardless of the technology behind it we can use it for or it is the mechanism that we can use to be able to interconnect applications and these applications can perfectly be an application in Vue which is what we have here it can be an application in Flutter an application in native Android with Android Studio in scoute in React in Angular or anything they invent out there it is that simple
So this is clarifying a little bit about the purpose and how we can do this well basically making http requests basically when we are here seeing this our API from the browser we are making a get type http request through the browser this should not be a surprise because we configure it this way so basically we have to do the same from our application in Vue but luckily the javascript API and again javascript have absolutely nothing to do with Vue it already has a mechanism with which we can make this type of requests which are the famous fetch that we have here which is nothing more than a function in which we configure the route and other additional parameters that we are going to get to know little by little and that allow us to make this communication we will take care of this in the next class in which we are going to make our first communication or consume our API for the moment what I want is to make a simple comparison see a structure and also compare it with another thing called acos which is basically the same as the fetch but a little bit more optimized and that is not part of the javascript lapide if we do not have to install it but we are also going to compare that here a little bit so let's see what a fetch request looks like here for that you can search here fetch javascript here you have:
fetch('http://code4movies.test/api/pelicula')It is configured or looks like this: Note that we put fetch the URL or the route that has to be complete because they are independent applications, that is, on the one hand here we have the application in coding 4 This is the url and that of Vue at least for the development server I don't know if we raise it in the same way right now we are going for that it would be something like local Host 8080 and there it goes, then they are two completely different routes because they are two completely different applications, then here it is important to put the entire route in this case it would be this one for the first one that we are going to consume, then from here we see some somewhat strange things, also an important point may not be seen in php so clearly but when we escape from the scope of the application, understand that we are going to a file, it also depends a lot on the size of the file or we are going to make a request through http, we are escaping a little from the scope of the application and therefore in those scenarios they are asynchronous type requests, again sometimes in php that is not seen as much because it encapsulates it behind, so to speak, but in JS this It is a little more obvious remember also that we are working with two programming languages
On the one hand php and on the other hand javascript therefore now we have to adapt to what would be how javascript works which in this case is through asynchronous requests for what was commented before because from the side or from the point of view of javascript we are not opening a file but we are making an http request then again as I was telling you before any http request is going to be asynchronous and to resolve this type from javascript we have several ways one of them is through the promise functions which is the configuration that you are seeing here which is the one we are going to work mainly and I do not want to as who says mention more so as not to complicate things but what this does is every time we have an asynchronous request for what was commented before this what it does is that it is resolved when it has to be resolved that is to say again if we had a file so that you can also see it a little more than just five lines it would be something quite fast to read but what happens if that file that we have to open and read has 5,000 pages would obviously be very different, therefore it is an asynchronous type request because it is not really known how long it will take since it depends on many factors such as the speed of the disk, the speed of the server, the size of the file, the complexity of the file, the format of the file, many little things that are out there, so that is why they are asynchronous and here the same thing happens if it is a request. Well, if for example the server has a fast connection to the Internet, it will resolve it more or less quickly and if the one that is consuming does not have much content, that is to say, it does not weigh so much in byte or kilobit, it will resolve it much faster than if it were much larger, that is to say, if here, for example, I returned what we are returning, I think it is like 20 results, it would be more or less fast, but what happens if there are not 20 results, if there are not 5,000 results, obviously it will take much longer and that is why it is asynchronous. So I hope that the fech is a little bit in context, which is the way in which we have to make requests. http placing here what we want, what we want to consume and also because here we have a den that is to resolve promise functions or to resolve a promise
console.log(fetch('http://code4movies.test/api/pelicula'))We will see that <PROMISE> prints for the reasons mentioned above; additionally, we will see an error like the following:
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.A promise is nothing more than an asynchronous request that can be anything in this case it is an http request and what we are doing here this already depends a little on the response but in this case as it is a Rest Api and par excellence we return what is xml or JSON but usually we use JSON what it is doing is casting the response to a JSON as simple therefore before processing the response then we are going to see what it prints here exactly but that is what it is doing converting the response to Jason so that we can handle it more easily and this is more or less the same as it is a process that may not know how long it can take Because if it is a small response then it resolves it more or less quickly but if it is 10,000 records then it will take a little longer that is why it is asynchronous and we have to do another promise function and here we finally have the result do not worry if you do not follow me much remember that you can watch this video in the order you want as well as the previous ones in case you have any questions that are a little introductory if they are a These are a little abstract, well
Fetch and axios
They are the fetch but on the other hand we also have the axios that we will see a little later I would like to introduce it once and for all so as not to force this so much basically the axios are more or less the same as we have with the fetch but we can pull ourselves a little for this here I am going to go quickly to this to this post in which it is comparing both there are many advantages and disadvantages and you can talk about many little things about both anything you can look for more information on the internet but for me it basically has two advantages On the one hand you do not worry about what is the integration that we have natively, that is to say, maybe in some browsers the fetch have not yet implemented it Although it would be a little strange but that can happen So using the acos which is a library that we install additionally we get rid of that problem because as it is a library that we install at the level of our application Yes or yes it will have support for the use of acos then there we have as who says the first advantage that we are going to have support regardless of the browser the next advantage is that we also have a slightly simpler configuration since we are going to see a little more ahead when we use the fetch that the syntax gets a little complicated also indicating the type of request if it is post delete and also that we do not have to do the cast in acos we do not have to do this cast then basically for me those are the main advantages in summary that we have support no matter where the application is being consumed we do not worry if it is implemented or not as in the case of the fch and that we have a simpler more elegant syntax and we do not have to do aom casts so in summary that is to conclude or to make a small summary of everything the fetch are the ways that we have in javascript to consume http requests that by definition being http requests are of asynchronous type that is to say it is not known when it can end when it begins and when it ends and therefore we can resolve them through promise functions and for this here we have the following syntax and the next class we are going to try to consume the first request the one we have here Well the first resource so let's go there
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter