Basic API Consumption, Vue 3

hello everybody in this video we are going to start consuming a real api um i would try to do a couple of examples i will use one that is simple enough um in order to understand how to make the calls and how we can pull it up in our application and then i will do a second one a little more complex that will require some parameters probably on ap key and as an assignment i will need you to to consume another one different the ones that i actually put on the video so um i hope that you already did the quiz and you already read the the assignment for the what is an api what is the http pairs and all that so we can actually get started so we're going to be using our basic route view router um as base as you can it's a little bit also probably i need to update it but for now i will be using this um and you're free to use in mind too so don't worry about that i will put the links on the comments so the idea is going to be used as so we have a base we have a release something that we created we don't start from scratch and the idea is to consume an api from this list so here i have 15 fan apis for your next project and there is a bunch of them that we can actually use and they give a repository with a bunch of other ones that we can use later so i will invite you in invite you to actually look at it and you need to choose one from the list framework from this one or this list doesn't matter for now i will keep it simple and we want to use the advice sleep api this is a really simple api that just reque require a get request through an endpoint and then we will return an advisor random advice i can retrieve an advice by id or i can retrieve i can search a specific advice back a specific query and that query should could be a word could be something specific that i need to send so i believe this should be more than enough um what i want to do is i want to create an application that will pull up the random advice at the beginning and it has search box and when you search for something it will pull up the rest of the advice to research an advice method and [Music] that be it that should be simple enough to to understand how to do that we're going to be using two different libraries for this the main one is going to be axios and should be more than enough for us actus is um a typical client for the browser and node.js and it's really helpful to to go through the process how to make an api call as you can see we just need to import axiorys cells and then we can do a get request to a specific and it give you some promise and with the specific response right that response usually came up in the data element so it responds data should be there actually the responses itself the response have the header have the status all the information that came out when you make an api call so everything came in that object but we can actually use asynchronous and i actually like better to use asynchronous we can just send an api call like this so we can specify parameters like these ones or there are different elements we can do a post tool we can create a function that's wrapping up actions called an accus api call and the best way to use it is with the configuration itself where we can actually specify configuration or even you can create the instance and that's where we are mostly going to be using create an instance with a without base information it is pretty much an information that we can have like the url or the base url itself parameters we need to send parameters and we need to send something on the body things like that right credentials stuff like that uh and on top of that i want to use a view request is a really good wrapper for making a request and actually it can work alone as you can see over here sending through a string or it can be a wrapper to access and we can make a call the benefit of using this is that we'll make or call responsive it will already wrap it up and we'll make the calls automatically for us so that means it will be a little bit um faster and easier for us to consume so in a view application we're going to use those two and i will show you how easy it is well to be sincere i never used requests but it looks pretty cool so let's let's see how it goes in this video i've been using axios a lot in the past so this should be pretty much easy and i like what i see over here so let's see how this actually works okay so we know that we have a couple of endpoints that we need to call the advice endpoint and the search engine that buys endpoint doesn't have anything else just making the call itself and should be more than enough and we add a search where you need to search the search as and is not even a parameter it's part of the url so it's actually the search object let's see what is the search object this promotes the example give you the common results and the sleeves are the different advices that will recruit the application itself so yeah that should be more than enough let's see how it goes so let's get this one i will create um advice api i would call like that we'll make create repository i will wait for a minute okay let me clone it so let me get back one level give me the cheat clone that one oh my god this is logo sorry i'll go to advice api i will install my dependencies i will just do a simple npm out to verify it has something outdated and i have a lot in this case so i can do a simple npm update eventually more than enough to pull the new information there the npm out again yeah we are up to speed we open it with visual studio code and i will just get back to here and i will do npm run that just to run the code right away okay we have the router running right there cool so let's do some changes here and there the first thing if we go to the index.html i will call advice calls and in my source application that you probably know in my component navigation uh we'll change this to be advise call i change the name um i don't need a router so probably i can just get rid of this navigation oops let me add this padding j to th1 probably and i can remove the now the navigation there you go and just because of that that's this mean that i can put this center there you go yeah so i have application [Music] one last thing that i will do is in my package.json i will change this to advice call right and that should be for now i can just commit everything and said [Music] do some changes just to to make the call after i have that i will open my terminal and well before we actually install those let's tag this the way they are supposed to let's go to the pages and let me remove the about page i don't need it let me remove hello page and in my router i will remove the about on the hello and i will remove the about on the hello i don't need those okay more that should be enough okay so in my index i have my home page there let's create a simple dip element here i will do an input type text yeah let's do a placeholder and let's hold on search and advice okay and i can specify let's do some classes there and let's do with full but in top of i don't know 16 maybe actually little margin rounded full text center padding y of 4 text excel that should be more than enough um let me make this a little bit smaller so you can actually read it yeah okay i have my device there to search it and i want to pull up a random advice at the bottom and i will call this let's do a paragraph and let's do a low right let's do a great actually there's no deep anesthetic class create read call and class actually need to do default here and this zoom grid calls little three columns probably and inside we have different paragraph all right there you go so let me replicate that let's do a gap for those one to be mineral four and padding top of eight no that should be simple enough and let's actually make this smaller let's make two and let's increment the gap to 16. there you go uh batting top 16 blue yeah let's make it simple so what i want to do here it will be my layout pretty much and it's a really simple layout so let's comment all out i'm gonna say layout done and now the important thing came so inside my source i will create a new file inside and that file will be inside the composable composable and i will call this use advice right for this i will import my preference for now yeah let's import the reference from view and i will cons advices equila yeah something like that should be more than enough but let's make um [Music] advice lauren and let's multiply this a couple of times right unless actually we have like i don't know file devices and it will do cons use dice picture devices and for now i will export default just advice right this is just how can i say it dumb element but it will promote the structures that i need to have for this that mean that in my index i should be able to do my script setup and with import use advice from composable advice there you go and now you do cons okay i will use a pisces actually and i can do now here a simple before so let's do b4 advice index in advices where my key should be my index in this case right something is not working right now let me check what is happening okay i found the error so what i did here is just getting the advice from my advices right and my paragraph would be the advice advice in this case that's how the object is but here the issue is when i exporting it exporting everything and it should be yo that element like this so if i do this and i restart do i have all my advices right here the way there is supposed to be now something weird is that i have hmm i don't know he didn't get the columns it looked like he didn't get the columns so i have three five three five oh wait yeah because this is a block element probably or because the gap is too just too big oh wait wait i know what is the issue i need to have another div here my paragraph will be inside the dip but my b4 should be here oops i don't know what happened here there you go yeah so this is the one to get repeated and it will keep the advice so that way we have my advice into columns and i've been reading what they're supposed to okay so we have those so the idea here will be start using the api itself so i need to import i need to install npm install axios and i will install and get an installer view request so install access of your request right i will go to use advice and i will keep this empty for now i refresh there you go so i will do here we can actually see the data fetching there is import access from axios and use request from there let's put those two right and i can use a axis instance so let's call this um cons api let's call api equal access create with my base rail to be my advice sleep and i don't know wow this was really cool get the advice endpoint pretty well and that should be it right so in theory i should be able use to do a simple request that is going to be using that instead of axios itself so i can use something here comes um let me see what is that should recommend me that should be more than enough interesting value dot push will be a little different here that is sleep advice [Music] sorry it was fascinating how my arrow complete true co-pilot did all this um we're going to use something similar but let's let's simplify it i just wanted to see what has actually came up so we have the axios endpoint right we're going to create a simple get random advice cons get random advice and that will be simple a simple api perfect yeah it's pretty much like this and let's make this asynchronous and let's make this um wait and let's actually return it that mean so that means that we're gonna actually use now you know what let's actually create it like this get a random advice is going to be an instance of axios and then here we're going to be using guns pretty much like that i don't need loading an error i will just provide the data from this request and that data should be [Music] then that push that up lip spice something like that so we're just making the call and we just push an information that should be enough let's see if this actually works of course it didn't so something that i recommend you to use is view three depth tools you're using google chrome you can download a truck here is right now is the better one you need to remove and install it or if you're using firefox you can look for the firefox there you go the view depth tool um probably not this one we go here for the chrome for the better channel that's the one and for firefox is right here yes and the better channel is this one so you need to remember downloaded the better one that will allow you to when you inspect the element you have that view element over here and you can define what something is doing here as you can see my advice is have an array and my first erase is undefined that means that my call is actually working but it's not pulling the data the way it is supposed to be probably because let's see what is that itself that's a simple console log data just to verify what is there and let's restart it uh-huh but random advice didn't want it if i go through here directly i can pull up this so it should be working so why my use request is doesn't like it message not phone [Music] okay let's do this asynchronous let's do this await and let's change this to recommend this out let's get them com response equal await your random advice and zoom my response dot data should be here so let's make the call let's call this from respond to res or this didn't like the word response itself oh oops i can use response but i here i need to do asynchronous let's try it that one is actually coming empty there you go okay my forward last thing he was actually messing up we can see that the sleep is right here and we have the advice it's it's actually coming perfect so my call was not set up correctly that means that i can do something like this and remove this and just get the data itself let's check that okay data.value verify from define it right value i have the data over here we have the sleep element okay that is sleep advice dot sleep dot advice interesting i'm making the call the call is working the information is rapid that we're supposed to be about data.value but it's reactive directly no there's a weight probably reason advice so if advice didn't come up and sleep it's undefined do i need to bring the data data no oh wait probably not advice in singular no but probably what i can do here just to verify my biases will be that value a while a data slip advice that work yeah we have an issue don't push because it's an array i want to push my data that just came out from my use request and that happened without checking the extension first so give me a second okay this software happened to me so let's get away from the view requests it's not doing what it's supposed to be doing or it's going to take longer to understand it sorry let's just remove it and let's use the old fashion actions directly so you request get away okay so we create yeah and the the api is for actual request so let's actually remove this from here okay well we have there data is not defined yeah because this should be advices and it will send something random with advice that should be connecting probably no use dubai in advices actually this should be working now [Music] let me check i'm refreshing again there you go advice on the finance you said by this here yes so use all bases here and the devices should came from there that we actually define it through here i got rid of this read up this for now and this let's keep it simple the way they're supposed to be we have the original issue we have reference and we have errors advices is undefined but i'm returning from here oh yes i'm exporting calls use advice because it's asynchronous maybe because i put a synchronous now no it's worse there you go yeah the synchro was messing up okay so let's import axios we create this and let's choose the probably we can send this down let's put this actually inside and it will be as this one going to be asynchronous but it will not return anything let's do cons response equal await fbi get there we go and if we have if response status equal to 100 that should work advice value is response that is sleep advice value.push okay and we need to export that one actually this should be executed so instead of exporting it so probably we can get this up right and here we just execute that one there you go never cut your own fridge he's doing it and we can do something like this learn to handle criticism don't promise what you can't deliver we are sending the data asleep element the way the report wisely because that's how actually came from the database itself okay so this is actually working that means that we can actually empty out this and don't burn bridges that should work when having a clear out as yourself an item has an financial practical stupid value it's not jacket there you go different advices that came randomly now we need to search and advise oh wait it's not and it's n so let's look for or index or placeholder where is it search on advice so what i want to do now so we have to get the route of advice and i want to execute cons search let's call a simple search and it should be asynchronous and we're going to get from the restaurant from there but we need to call it remember that it's advice and then we have forward like search and the query itself that means that we're going to send in the search item should be here and we're going to get and we need to do this the search element and we need to send the query the search item right and then we just do something like the difference with the search and let's remove this go to search object sleeps is in plural so we can actually do something similar if the status is fine if we found something then we can close it at bad values you will be equal response data slips and that should be and we need to send the advices and we need to send the search right so the random advice is going to run the beginning that's why we just executed like this just to get the random one it's going to get whenever we landed on the page right so the second one we actually need to search it for that let's use over here let's import reference from view and let's zoom cons search item equal reference empty this input will have a b model search item that means i put something here there you go it's working look at this whenever i change something and i guess you'll get a new one get pushed nice so let's get back here and we have the value push let's actually do value zero always change the first element no well let's keep it like that oh let's keep it like value equal that works there you go value equal that and then here the value will be another one that i need to send okay perfect so for the search item we have the v model there and we can actually do advices and search we need to get a search is who we call it and we just need to do a simple ad change little search and probably we need to do the validation things like that but for example let's do call moment did it work or not searching time oh wait a change we need to call the search with or search item we're going to send the search item to there so we have the random one that should loop time only you are cheese moment okay there you go we have each other here oh look at this i have a in my network tab i can see that i'm looking for c without they are search so that means that here i'm missing an error okay so let's refresh for time there you go moment there you go and we have an api now so we're making calls in order to call the api and make it reward the way that it's supposed to and this is this is supposed to be the easy one so we'll stop it here she'll making a call to axios really quick and reading a little bit the documentation we have a couple of endpoints what i want to look for now is make it the same application but a little bit more complex and probably with pagination where we pull up data and then we can actually select that data element and we see details of that and probably we need to get something with the authorization in this case the api call was really straightforward because we don't need to have authorization at all and we just have two end points that we're using the random one that is just the root itself and the search element with a specific element that we are looking for and that should be so let me stop the video and actually push all of them vice call done i'm making a mess if i can synchro through here i don't know if that works not yet but i can do it here get push or hit master there you go and my advanced api now i have my advice called advice well it is what it is right so let's stop the video for now um let's now create the second one any question any doubt don't hesitate to reach me happy calling everybody

Channel: Learning with Rodo

Views: 61

Keywords:

Id: baI5K7SNycs

Length: 48min 2sec (2882 seconds)

Published: Fri Nov 12 2021