Fast HTTP Caching With Angular HTTP Observables
HTML-код
- Опубликовано: 19 июн 2018
- Tired of waiting for your network requests to come back? Use the power of Angular's HTTP Observables combined with RxJS and your browser's local storage to automatically serve up a locally cached version that quietly gets replaced by real data as soon as the network request is finished.
Наука
![Top 10 RxJs Operators in Angular [Angular Series]](http://i.ytimg.com/vi/5TnWFaI49aw/mqdefault.jpg)
Super awesome! please dont stop sharing such neat tricks :)
Great tutorial and great lvl on difficulty. Greetings from Sweden
Excellent video, very clear and easy to understand; many thanks Steven.
The only thing I would do differently is declare the _repos_ observable as _private repo$: Observable;_
Dude you are really Awesome.Thank you for your post. It saved me a day of struggling to find a way to load Api call results properly into my carousel because results where coming asynchronously
Great video, Thank you Stephen!
Excellent video - thank you!
Nice video. Easy to understand.
To everybody who is wondering why the Http GET appears two times in the network log.
The async pipe in the components html subscribes a second time which causes the second request to be send.
One might easily forget about this side effect of async but your server has to do twice the work.
Recommendation: avoid listening to observables in your templates.
Solid recommendation. Thanks!
Simple but excellent, perhaps add distrinctUntilChanged and shareReplay into the mix
awesome demo...great video
you're a hero! more tuts please! thanks
In your approach you make 2 http calls, one from async, second from subscribe, please add some info about this flaw
Thank you a lot, great video :)
great video!! Thank you so much
Hey Steven, thanks for the helpful tutorial. A couple ideas, when you review concepts, will you please make sure they're all on the screen? At one point you do a small code review without scrolling through some of the code. Not a big deal, of course, it just makes it easier on the viewer. In the same way, when you say "and there it is" around @9:07, will you please be careful to point out what you mean in those instances? I'm a little lost about what I'm aiming to see. The localhost request having a 304 status? It would be great if you can answer and better if this comment helps others to comprehend even more of your great content. Cheers and thanks for another wonderful video!
Oh, got it now. Took me a few viewings. I hate to be so picky about the language. I'm newer to Angular so little pieces of a tutorial like that one can trip me up just a bit. "There it is" refers to the cached data showing in the view prior to the HTTP request resolving.
Awesome video. Thanks for sharing. May I ask what chrome DevTools theme you're using?
thanks, man nice video
Hi, even though it may not make any difference in this small project, you should NEVER EVER put things like HTTP requests into the constructor. It's bad practice and no one should "learn" it that way just because he sees it here and doesn't know better!
You should also add an advise that the localStorage of the browser has limitations and thus cannot be used to put each and everything into it, whenever someone wants to cache something (to cache larger portions of data, the IndexedDB is there for that).
Sorry, but What you were talking about 3 years ago bro xD. I Hope you got some more knowledge about dep injection and difference between cache and localstorage. 1 minutę later: OMG he really used localstorage what the heck
Well, Im just not finna watch this video then
Great tuts Stephen, any chance we could get a tut on applying Fast HTTP Caching to Angular Material Table DataSource via a service?
I really like massaging the data.
You can very well use this video as an asmr
Nice 👍, what are vs code extensions do you used ??
Hi Steven .. this is a great video .. How would we cache images in angular when using firebase storage .. ?
i think best approach is to use Map,rather than storing data,like if the usecase is user can reload the page also,then only we can use localStorage,because storing data in localstorage is not good option.
With map,we can store data in key,value pair and then we can check whether data is already present or not
good job
Is there any reason to use map versus pluck?
nice example of caching - kind of :)
We need local storage setitem to set it into local storage right how can you store without using setitem
Hey, I have a token that I wanna cache. But this token will. Keep changing evry 5 minutes.. How can we cache this?
Yes, but in practice you'll get same data, it's never updated. In my opinion in reality this approach will not be good.
👌🏻👌🏻👌🏻
I did it exactly as you illustrated, but the request is still taking ages. any thoughts what could have gone wrong?
It is cool
thanks so much, so how can we invalidate cache?
Hey, the network tab shows 2 calls to repositories, why are we making 2 calls ?
First request is not GET it is OPTIONS. Then if GET is allowed it will make get request
Actually @Nikola Arsenovic, it is a redundant call. Both are GETs (see 9:37, the first call has a JSON response).
The reason it is redundant is because he subscribed in 2 places:
1. in html, via the "async" pipe
2. on line 24 of the code-behind, via ".subscribe"
The http Observable needs a "shareReplay(1)" operator in the .pipe( ) so that both subscriptions use the same result. Otherwise, they are independent.
Will this work on images?
I still seeing API calls , how that can happen ?
how to set cache key ?
I was looking on how to cache POST Requsts beautifal
good video. But voice is too low
Is localStorage safe? 🤔
You encrypt all the data stored In localStorage
I have always used local storage to cache my data lol, shocking how I received these project from this company and they catch their data on another server :(
localStorage has some limitations! Unfortunately the author of this video didn't mention that as advise.