CacheService - 图1 This article has not been translated, hope that your can PR to translated it. Help us!CacheService - 图2

CacheService

代码演示

CacheService - 图3

基础样例

最简单的用法。

  1. import { Component, OnDestroy } from '@angular/core';
  2. import { CacheService } from '@delon/cache';
  3. import { NzMessageService } from 'ng-zorro-antd/message';
  4. import { Subscription } from 'rxjs';
  5. @Component({
  6. selector: 'cache-service-simple',
  7. template: `
  8. <p>value: {{ value | json }}</p>
  9. <div class="pt-sm">
  10. Basic:
  11. <button nz-button (click)="srv.set(key, newValue)">Set</button>
  12. <button nz-button (click)="value = srv.getNone(key)">Get</button>
  13. <button nz-button (click)="srv.remove(key)">Remove</button>
  14. <button nz-button (click)="srv.clear()">Clear</button>
  15. </div>
  16. <div class="pt-sm">
  17. Key is valid request:
  18. <button nz-button (click)="getByHttp()">Get</button>
  19. </div>
  20. <div class="pt-sm">
  21. Notify:
  22. <button nz-button (click)="registerNotify()">Register</button>
  23. <button nz-button (click)="unRegisterNotify()">UnRegister</button>
  24. </div>
  25. `,
  26. })
  27. export class CacheServiceSimpleComponent implements OnDestroy {
  28. value: any;
  29. key = 'demo';
  30. private notify$: Subscription;
  31. get newValue() {
  32. return +new Date();
  33. }
  34. constructor(public srv: CacheService, private msg: NzMessageService) {}
  35. getByHttp() {
  36. this.srv.get(`https://randomuser.me/api/?results=1`).subscribe(res => {
  37. this.value = res;
  38. });
  39. }
  40. registerNotify() {
  41. if (this.notify$) this.notify$.unsubscribe();
  42. this.notify$ = this.srv.notify(this.key).subscribe(res => {
  43. if (res == null) {
  44. this.msg.success('register success');
  45. return;
  46. }
  47. this.msg.warning(`"${this.key}" new status: ${res.type}`);
  48. });
  49. }
  50. unRegisterNotify() {
  51. this.srv.cancelNotify(this.key);
  52. }
  53. ngOnDestroy() {
  54. if (this.notify$) this.notify$.unsubscribe();
  55. }
  56. }

API

set()

参数名类型描述
keystring缓存唯一标识符
dataany | Observable<any>缓存数据源,数据源为 Observable 时,依然返回 Observable,否则返回 void
options{ type?: ‘m’ | ‘s’, expire?: number }type 存储类型,’m’ 表示内存,’s’ 表示持久
expire 过期时间,单位

get()

参数名类型描述
keystring缓存唯一标识符
options{ mode?: ‘promise’ | ‘none’, type?: ‘m’ | ‘s’, expire?: number }mode 指定获取缓存的模式:
1、promise 表示若不存 key 则把 key 当URL发起请求并缓存且返回 Observable
2、none 表示直接返回数据若KEY不存在则直接返回 null

type 存储类型,’m’ 表示内存,’s’ 表示持久
expire 过期时间,单位

getNone()

获取缓存数据,若 key 不存在或已过期则返回 null。

tryGet()

获取缓存,若不存在则设置缓存对象,参数等同 set()

has()

是否缓存 key

remove()

移除缓存 key

clear()

清空所有缓存。

notify()

key 监听,当 key 变更、过期、移除时通知,注意以下若干细节:

  • 调用后除再次调用 cancelNotify 否则永远不过期

  • 监听器每 freq (默认:3秒) 执行一次过期检查

cancelNotify()

取消 key 监听

hasNotify()

key 是否已经监听

clearNotify()

清空所有 key 的监听

freq()

设置监听频率,单位:毫秒且最低 20ms,默认:3000ms

get 和 tryGet 的区别

本质都是获取并返回缓存数据,get 相比 tryGet 更简化,前者按KEY即是URL约定的风格,后者需指定数据源对象。

酷操作

async 管道

RxJS 和 async 管道二者的配合可以帮助我们非常友好的使用缓存数据,例如:

  1. @Component({
  2. template: `<li *ngFor="let unit of units | async">{{unit}}</li>`
  3. })
  4. export class Component {
  5. units: this.srv.get('/data/unit')
  6. }

缓存与请求

有时需要依赖字典获取远程数据时:

  1. this.srv
  2. .get('/data/unit')
  3. .pipe(
  4. map(units => this.http.get(`/trade?unit=${units}`))
  5. );