Angular 10 Tutorial #74 - HTTP GET Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn and implement how to use http get method in our angular applications in the last episode i introduced you to the concept of http client and http client module today we will learn starting the first method which is get method we will start with basic implementation of get method then we will add http headers we will add http params we will add observable of a certain type and much much more in today's episode at the end of this particular episode you would be able to master how to use http get method in our angular applications let's get started this is part 74 of the angular 10 complete tutorial playlist i have planned more than 100 tutorials for you in this series including a live project the playlist link is in the description box below make sure you check it out in order to learn and master angular completely i have covered all the topics from ground up from basic to most advanced use cases that can be possible so make sure that you go through the entire playlist if you really want to learn angular in detail today's topic that we are covering is angular http get method before i start i'll request you if you have any doubts please do ask me in the comment section i will try and help you as much as i can all right a quick note to our viewers who are joining us new on this episode http client is used for performing the http request and responses the http client service is available in the package angular common http to use http client in our application we need to import a module called http client module usually that's imported in your app module http client provides us with various useful functionalities like headers params interceptors etc we will learn all about that in today's episode along with implementation of http get method so what are we going to do in the hands-on lab today we will start learning how to use a simple http get call then we will add headers to the same method we will add params http params and finally we will also learn how to do typecasting and catching the errors there's a lot of work to do so let's get started first i'll just quickly do a recap of what we did in last episode which is to include the http client module in our app module so we imported the http client module from angular common http and imported it into the array so http client module is now imported in our app module and we also created a service by the name users in this what we did was we just imported the http client and injected into the constructor so we have an instance of http client which is http now so once we have it so what are we going to do we are going to use this http instance to call the get method and let's get started with our hands-on lab now all right so before we work we need a endpoint usually this end point is provided to you by the back-end api team if you're working as a full-stack developer you might as well have a endpoint but for our friend front-end developers who do not have any api we are going to use an api which is available online which is called jsonplaceholder.typecode.com this provides the free fake apis for testing and prototyping so in order to use it just copy the url it has multiple resources you can see it in the documentation we have so many resources that we can use we have the post comments albums photos to do's and users so what we are going to do we are going to use the users so just copy it and just say users and this is the api endpoint we will be calling all right so that is what we'll be working now that being said now let's get started with our coding all right so the first thing http get request requires is this dot http that is the instance we created here and say dot and you will see all the methods that this particular instance provides we are going to select the get and then we are going to have to pass a url which is the same one that we just got it from the fake api here json placeholder go to that and copy that and paste it here all right so this is the most simplest use case that you can think of so what i'm going to do is i'm going to comment of this code because we do not need it this was stubbed now we will work with actual apis all right so now what i've done i'm just using this.http.get and passing the url i will just simply return this all right now if you remember we were calling it in the customers component like this now remember that this will by default return an observable you can see here that it is written in observable object so we need to subscribe to it so we are going to do it this way dot subscribe and whenever we subscription we will receive data and in this we are going to say this dot users is equal to data so what i've done now i'm calling the method which is in this service if you see here hover on it you can see that we are calling this api in this method it is written in an observable of type object currently and we are subscribing getting the data putting it as this dot users all right so let's see the application once so we see that now it is looping and showing the object so let's go here here we are just looping that value so instead we can just say dot name and we should see the name of all the users we are getting the data now what this is this most simplest use case you can work with some of the key points that you should remember is we need to pass the url for get method that's number one number two when we we will get a observable data which means we need to subscribe to the data we need to subscribe in order to process the results or the response now let's make it little complicated now so what we are going to do this is the simplest use case we are using get method now i want to pass some headers right so we can always say host headers i'll create an object and say new http headers okay so this is and uh this http headers is provided in the angular common http that we not need to use if we want to pass some headers now what are headers let's fix them headers dot now you will say append has set key etc okay so you can do this way or you can directly write inside this for example like this and you can do it like this also this is also fine so here i'm going to define my content type i will say that the content type is application slash json and i'm going to pass in most use cases you will have something like authentication token right some value that will be sent as part of this url now to pass this it takes option if you see comma if you put comma you will see the documentation under the options you can pass headers params etc so what we are going to do in the options we are going to pass headers right headers colon the value which is what we created here right so let's re save it now along to this url you will pass the headers using the get method now open inspect element go to network and refresh you will see call going to the url so you can see the request url here you can see the method which is get and in the request headers if you see you will see content type application json which we set you will also see authentication token right so this is a way we will set our headers using get method now similarly we can set http params like if you want to send some parameters like page nation page size etc you can configure them in http params let me show you how so we are going to use params here and now i'm going to say new http params all right so now see what i'm going to do i'm going to do set and here i'm going to set the value and i'm going to say page size comma 10 right page size is now 10 and similarly i'm going to set one more and i'm going to say page options and here i'm going to say how many options i want i want 100 results that's the page page number and page size right so you can say page number and page size that how many results you want per page so now that you have set it a lot of times people will make mistake here i'll show you those mistakes also so then just like how we passed headers we can pass params and here we will pass the parameter params see carefully i am passing headers and params should this be the same name no obviously not you can give any name you want make sure your object variable has the same name these are the keys headers and params are must not must i'm saying that's the key name so whenever we pass we have to pass it using the same name so we got the headers we got the params now let's see what data is sent to the url go back refresh and now you will see see the url now you are sending page number and page size right so this is the params which are visible in your url right or they're called url params page number page size now you're sending in the request headers you have the authentication token and content type set so what we learned here is we have learnt how to use get method we have learned how to use get method by passing headers we have learned how to set get method using bypassing params also now remember so we did http headers example we learned how to use http params now i'm going to show you by default all the http returns observable observable of type object okay if you don't typecast it it will by default always will return you observable object if you go over the method you can see here it is saying observable object but in most enterprise applications we need to typecast it and that's the beauty of typescript so what we can do is we can assign a certain type of data that we want to work with let me show you how so what i'm going to do i'm going to create a simple interface here and let's just call it user for now and i'm going to say this will have name it will have a email right and say phone number and this can have any type of data type that is allowed number string whatever you want to use it and now i'm saying instead of this method should return me an observable observable of type user right now when you save it you will get error because this has to know that it has to return at certain type so what we need to do in front of get you would have add this user so now you are telling that this method will return me an observable of type user and this get call should return me an interface of type user now when we go to our customers component wherever we are calling this method now you see that if i do data dot you would see the three attributes coming from the interface right so if you want to just print it do a console log and you would see that the data is coming here which is having all the data but we have typecasted now so if you see the array that we are getting we are getting the complete array of it but if you want to work with certain fields you can always choose and say dot name and here you can just remove it so that way you get the printed the value of it right so this is how you can work if you're working with any certain data type of your application that you want to create so you create an interface and type casted so now we know that it is of certain type which is user in this case all right so last that i want to show you the use case is let's say you have some now you have subscribed right so most of the times people make this mistake that they subscribe but they never do error handling so you should always write and you can see with subscribe you have next you have void value error also so what you can do is you can do error handling here it's a callback so you here you can say console.log enable unable to get data from url right so what i'm doing if it is successful use this else give this error now i'm printing it in the console but usually you would show it to the user right so whenever you subscribe make sure that you always write a error or a catch so that you get that value now what i'm going to do is i'm going to make a error which is wrong here right so this will fail i know that so the idea is to see and capture that data right so you see here unable to capture the data from url right so that is how we can capture the error but the ideal way of doing that is always writing a generic one in http interceptor that i'll cover it in next episodes so we learned that whenever we write a subscribe process the data and also catch the errors okay so so these are the typical things that you will work when it comes to http get method right this is all you need to know about get at this point of time we will as we progress into the live application you will see that i will write a lot of these into common utility for example headers we can move them into http interceptors right you can write a lot of code like error handling etc in the interceptors so when i cover http interceptors i will move a lot of this logic into the interceptor right all right so that's all for today uh what you should do is practice along practice all these use cases that we talked about make sure that you're comfortable ask me if you have any doubt i'm here to help you i've listed down some points for you so that you get data captured when you are practicing always ask me if you have any doubts if you like my work please do consider buying me a coffee at buy me a coffee.com slash art tutorials thank you so much for joining see in the next episode where we will learn about http post method in angular applications thank you so much for joining see in the next episode

Channel: ARC Tutorials

Views: 5,580

Keywords: angular http get tutorial, angular HTTP GET example, angular get http tutorial, angular http example tutorial, angular httpclient tutorial, angular httpclient module tutorial, angular services tutorial, angular http tutorial, angular http client module tutorial, angular httpclient example tutorial, Angular 10 Tutorial, angular 10 crash course, angular 10 full course, angular full example, angular 10 beginners tutorials, angular 11 series, angular services example, angular get

Id: Bsgqf2uTgMo

Length: 17min 11sec (1031 seconds)

Published: Sun May 02 2021