@d4h/angular-http-cache
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

GitHubStatus for D4H/angular-http-cache npm

@d4h/angular-http-cache

angular-http-cache offers a pair of tools:

  • A network caching interceptor for Angular's HttpClient. It works by storing request success request responses in an internal cache, and returning this response from the cache so long as the TTL has not expired.
  • An Intersection Observer service to test for element visibility.

You really should not ever have need to either of these tools. Conventional HTTP cache mechanisms are frankly superior to the interceptor, and ng-lazyload-image offers more robust lazy loading. You should only have to resort these tools in special circumstances. What these are you will know best yourself.

Installation

npm install --save @d4h/angular-http-cache

Configuration

angular-http-cache does not work without further configuration. It requires a finder function which accepts a HttpRequest and returns an object with two pieces of data:

  1. A string key, under which to store the request.
  2. An integer ttl in seconds, how long to store and return a successful response. Error responses are never cached, which permits retry.

Both the key and TTL are entirely up to the implementing developer.

export interface HttpRequestCache {
  key: string;
  ttl: number;
}

export interface HttpCacheConfig {
  finder(req: HttpRequest<any>): HttpRequestCache;
}

Configuration Example

In this example, the key is the full request URL, while TTL comes from a regular expression test. Requests to /foo/bar/:id will be cached for 300 seconds, and requests to /fizz/buzz/:id cached for 10.

import { HttpCacheConfig, HttpCacheModule, HttpRequestCache } from '@d4h/angular-http-cache';

export interface CachedRoute {
  regex: RegExp;
  ttl: number;
}

export const cachedRoutes: Array<CachedRoute> = [
  { regex: /\/foo\/bar\/\d+/, ttl: 300 },
  { regex: /\/fizz\/buzz\/\d+/, ttl: 10 }
];

export const config: HttpCacheConfig = {
  finder(req: HttpRequest<any>): HttpRequestCache {
    const route = cachedRoutes.find((r: CachedRoute) => r.regex.test(req.url));

    return {
      key: req.url,
      ttl: route ? route.ttl : null
    };
  }
};

@NgModule({
  imports: [
    HttpCacheModule.forRoot(config)
  ]
})
export class AppInterceptorModule {}

Element Interserction Observer Service

IntersectionService is quite straigtfoward: import it and pass in any ElementRef. In the below example GooseComponent performs mischief when it is visible.

import { IntersectionService } from '@d4h/angular-http-cache';

export class GooseComponent implements OnInit {
  mischief$: Observable<Mischief>;

  constructor(
    private readonly gooseService: GooseService,
    private readonly host: ElementRef,
    private readonly intersectionService: IntersectionService
  ) {}

  ngOnInit(): void {
    this.mischief$ = this.intersectionService.visible(this.host).pipe(
      filter(Boolean),
      switchMap(() => this.gooseService.mischief(this.goose).pipe(
        startWith({ type: 'honk' })
      )),
    );
  }
}

Support and Feedback

Feel free to email support@d4h.org, open an issue or tweet @d4h.

License

Copyright (C) 2019 D4H

Licensed under the MIT license.

Package Sidebar

Install

npm i @d4h/angular-http-cache

Weekly Downloads

0

Version

1.1.2

License

MIT

Unpacked Size

184 kB

Total Files

42

Last publish

Collaborators

  • hannesvdvreken
  • bhalash