How to Build an Ionic HTTP Loading Interceptor & Retry Logic

[@sairiopena1073]

Bro me has salvado la vida.. te debo una cerveza

[@KonstantinStanchev]

Thanks, Simon!! I will definitely try this!

[@arnoldgamarra8425]

Thanks Simon , very important topic to avoid boilerplate code !!

[@haridassramasamy3017]

Hi Simon awesome video bro but I need to face one issues page once it reloads time. loader function does not dismiss how to solve this problem?

[@UnknownIdentityDE]

Great idea to automatically refresh the token!

[@anroswell]

Great Simmon, thank you very much.

[@galaxies_dev]

Glad you enjoyed it!

[@ReadyVred]

YES token refresh, thanks simon!

[@matheusjordan619]

Thank you very useful in real life applications.

[@galaxies_dev]

Glad it was helpful!

[@TheMikesitox]

wow , very advance pro tip more video like this

[@jicarrozzo]

Well done man!! such a simple way to explain interceptors.. Where were you 2 years ago when i need this code!! 😭 hahahah.. You made it soooo much simple compared with the one i've learned from .. Once again.. GREAT JOB!!!

[@galaxies_dev]

Thanks Juan! Some topics sound really more complex than they actually are!

[@LiveFree0000]

Great tutorial as always Simon! I think there might be a problem though. The finalize() part where the loader is dismissed could be executed before the loader has been shown. In that situation, you would get a loading spinner that just stays hanging and does not go away. Any tips, how to fix that?

[@galaxies_dev]

Hmm yeah we might have to await the presentation of the loading before, but that could also be done with the right rxjs pipe functions!

[@Marshall86MT]

@@galaxies_dev if you use the forkJoin() to call multiple APIs in the same screen, there is a problem with the loader as you did in your nice video. I fixed using a boolean "isLoading" as a condition to check before running a new loader in case of multiple request in the same screen. In this specific scenario you don't need to run n-spinner per n-api but just one that is removed once the api are done.

[@madollamike]

@@galaxies_dev going crazy trying to figure out what these pipe functions would need to be, stuck in spinner limbo over here!

[@arj1411]

Hi team, I have one doubt. Suppose I want to make 2 or 3 http requests in parallel and I want to show a loading indicating the name of APIs invoked. Since here, if there is an instance of the loading then we won't display again. How we can handle this situation?

[@galaxies_dev]

Good question, either we would have to perform all Observables at once and only dismiss it at the end when all are finished, or otherwise I guess we would need some ugly code :/

[@azamalvi7727]

Thanks for this video. I have an issue that my spinner is not dismissing. It's keep spinning. Can you share a proper fix? Thanks

[@galaxies_dev]

Then maybe the call ended before the loading was displayed - I think you need to await the presentation of the spinner correctly in order to prevent this issue!

[@BigStav]

@@galaxies_dev I have the same problem here and it would appear it's because the HTTP Request has been sent and returned before the logic of the alert has called. Is there a way to remedy it? I guess in real world scenarios, the latency would be too high to complete before the interceptor but during testing the latency is barely anything so causes this issue.

[@david492000]

thanks,

[@sarojinidevi1950]

Good morning in my best 💛💓

[@galaxies_dev]

Good morning!

[@abhashsingh6293]

on click add button change to increment and decrement button in ecommerce ionic

[@Mewain]

I love your videos !

[@indrajatav2847]

Awesome 👍

[@fernandoalvarez3027]

Hey Simon, I have a weird behavior. The loader closes on some http services and not others. any ideas on where to start looking?

[@galaxies_dev]

Hmm do the HTTP calls finish? Perhaps there is some kind of racing condition and the loading isn't properly handled.

[@malfoy2797]

Hey Simon, just had a doubt.. is there a way to hide the spinner before its presented because I have an HTTP request that is called at an interval. So is there a way to continue the http request but hide the spinner ?

[@galaxies_dev]

Perhaps filter out the certain URL of that request in the intercepter and don't show the spinner in that case?

[@malfoy2797]

@@galaxies_dev is there any video or document that I can refer to ? Also is it hypothetically possible to get the top of the spinner and then maybe dismiss it when it shows up based on the id ?

[@omarmeziani4343]

hey simon, actually i'am using a ionic native http. i implemented the error interceptor like described in your demo. and it's not work. have some advice please to resolve this issue?

[@galaxies_dev]

Hmm I'm actually not sure if it will still intercept those native calls, never tried that combination :/

[@anthonyjr.ballug184]

Will this work with concurrent http requests?

[@galaxies_dev]

Hmm not sure, haven't tried that..Might require some additional logic to globally keep track of an open loading indicator in the interceptor.

[@jaswindersingh2143]

One Quick Question, since we need not add the token in auth module(login, logout). How to skip adding interceptor in such HTTP request?

[@galaxies_dev]

You could check a list of URLs inside the interceptor like I also did in my latest video on access/refresh tokens: kzbin.info/www/bejne/n5iVZZiriN2FbbM

[@jaswindersingh2143]

Ok let me try this. Thanks for the great content and your time 🙏🙏 Making my first freelancing IONIC app from your tutorial.

[@galaxies_dev]

Wow that is amazing 😍

[@jaswindersingh2143]

Can you please share your linked handle. Will connect there.

[@CraigShearer]

OMG Simon - this is awesome. I commented on a previous video that this would be an extremely helpful video, and now you've followed through! I'm currently on holiday but can't wait to use this and try it out when I get back to coding in a few weeks! Cheers... you're the best!!! :)

[@galaxies_dev]

Thanks Craig - I always try to listen what my followers say and create tutorials for your needs :)