Exception Handling in Angular | How to handle API errors in angular

hello everyone welcome to Quick code academy today in this video I'm going to teach you how we can do exception handling when we have API integrated in our project so people find it hard but it's really uh simple I have already uh told you about how we can integrate apis in our angular project maybe you can uh look for those videos on my channel but I will just uh quickly give you overview of my code so here you can see so in order to integrate any API you need API in point okay and I have uh injected this HT HTTP client from add angular / common SL HTTP and I'm using this HTTP as variable so in order to integrate what you need is this. http.get and the and your endpoint and you need to subscribe to that uh particular observable so if you uh see on the browser so I'm getting the response in this format since I have conso this I'm able to see this in console now there would be case where you will need uh need to do some coding or show the message uh if this API endpoint fails right so how we can achieve uh that so for that first uh we will uh create one uh scenario where this API may break okay so here let's say if I change this input to PS uh TS okay and that is not correct input so in that case we will get this error okay but in order to get uh get this error in specific format we will need uh this particular uh particular error code right so how we can get that so for this one what you will have to do you will have to uh do some changes in this code so instead of directly subscrib subscribing to this API end point what you can do is you can remove thisr X as of now and then here you can create one object within that you would say next then just like how we did it earlier so you can mention data any and then this Arrow function and here you can print your data okay console.log data okay so now uh let me correct this end point again so just in case if you want this mock API response so you can go to Json Place order. typ code.com there you will get the mock APS okay so now uh this is the wor KCK scenario and we are getting this data correctly as we were getting earlier okay now we need to uh check the not working condition so here in this case if you see we are getting this error correct so how to intercept that error so just like we did this next method what you need to do is you can create error colon then you can mention whatever name which you want to give I'm giving err and here you need to give error okay so now and then we need to create Arrow function and here we can mention console.log error correct and then let's see on the browser so now we are getting the statement printed on line number 25 it's correct right so from here uh you will get the more details about that error like what the error is okay uh so we can do whatever let's say uh we can add a condition over here like eror do status and if that particular uh status is 44 then you can execute your code console. log error error encounter encountered okay so this I'm writing it correct okay this is encounter and then you can print this status text if you want if backend is providing you any text that also you can include it over here so as of now it's giving some uh error over here so I will change it to any as of now and let's say so here also we need to add this condition if the error is 404 then only print this below below condition okay so now you can see right since this uh code is getting executed we are getting this uh line printed on our console so in this way you can do exception handling in your code very easily thank you so much for watching this video for more videos like this make sure to subscribe to my channel thank you

Channel: Quick Code Academy

Views: 760

Keywords: angular 13, angular 14, rest api angular, angular http get api, angular http post api, how integrate api in angular, how to integrate backed services in angular, http post angular, HttpClientModule, HttpClient, Cannot find name 'HttpClient', httpclientmodule import, how to subscribe to service angular, http get not working in angular, api exception handling, error handling in angular, api exception handling angular, angular 16, api error, how to handle 404 in api, angular 17

Id: 74BjDsJ0jwk

Length: 5min 13sec (313 seconds)

Published: Tue Jan 02 2024