Chidume Nnamdi
Feb 15, 2021 ⋅ 4 min read

Caching with HttpInterceptor in Angular

Chidume Nnamdi I'm a software engineer with over six years of experience. I've worked with different stacks, including WAMP, MERN, and MEAN. My language of choice is JavaScript; frameworks are Angular and Node.js.

Recent posts:

Enhance CSS View Transitions With Velevette

Enhance CSS view transitions with Velvette

Velvette is a utility library developed to make working with view transitions easier.

David Omotayo
May 22, 2024 ⋅ 9 min read
Six Carousel Components For Modern Frontends

6 carousel components for modern frontend languages

Carousel components have become an effective technique to organize and display it content to users.

Isaac Okoro
May 22, 2024 ⋅ 10 min read
Automate Repetitive Tasks With The Pinion Code Generator

Automate repetitive tasks with the Pinion code generator

Discover how the Pinion code generator automates repetitive tasks and boosts productivity compared to tools like Yeoman, Plop, and Hygen.

Joseph Mawa
May 21, 2024 ⋅ 7 min read
Exploring Hurl An Alternative To Postman

Exploring Hurl, a command line alternative to Postman

Hurl is an excellent Postman alternative that improves the DX of working with APIs through the command line.

Nwani Victory
May 20, 2024 ⋅ 8 min read
View all posts

12 Replies to "Caching with HttpInterceptor in Angular"

  1. return next.handle(req).pipe(
    do(stateEvent => {
    if(stateEvent instanceof HttpResponse) {
    this.cache.set(req, stateEvent.clone())

    this line of code create issue can you update it for angular 13 the main problem is i sent requst to bind table and i delete item from table and sent request its get reponce from cache please tell me how to fix this type of issue

  2. Great article!

    I just had to change the Map type to `Map<string, HttpResponse>`, where string is `req.urlWithParams`. With these few tweaks I was able to get mine to work.

  3. This solution doesn’t work. Angular doesn’t pass the same HttpRequest instance between the same requests. So, you can’t cache using request object, need to use some combination of its fields.

    `share` at the end is needed to make `do` (or `tap`) run only once

    1. What about making the get full URL with parameters string has the key of the cache map ? That will identify the particular request

  4. Aside from the other issues highlighted in the comments, won’t this just grow memory with all the requests/responses? For an enterprise app, this means client side growth will be huge, and things will be cached even when we don’t want them to be.

Leave a Reply