- 文档
开始使用 CacheService Interceptor
通常把一些远程数据缓存在内存或 localStorage
持久化,目的是为了减少 Http 请求的成本;这样的数据通常是字典、城市数据等。
缓存的获取应该是非常简单的,我们不应该把时间浪费在如何保证加载这件事情上,因此 @yelon/cache
更多是以约定为前提。key
作为缓存的唯一键值,它不应该只是单纯的一个标识符,如果遵守某种约定它的存在会更有价值。@yelon/cache
默认情况下不光把 key
当作唯一标识符,同时它还是一个用于获取远程数据的有效HTTP,例如:
cacheService.get('/data/unit');
在以往我们会认为,在它之前应该需要加一个:
cacheService.set('/data/unit', [ '个', '件' ]);
才能够确保获取到缓存数据。
而对于 @yelon/cache
而言,你无须 set
方法,直接使用 get
获取到单位字典,因为我们有一种约定,当缓存不存在透过 key
作为HTTP请求数据缓存后再返回。
缓存的获取与设置都是通过 CacheService 来操作,你只需要将 CacheService
导入对应的类当中即可。
安装
npm i -S @yelon/cache
成员 | 说明 | 类型 | 默认值 | 全局配置 |
---|---|---|---|---|
[mode] | promise,none | promise | 缓存模式;promise 约定模式,允许 key 作为 http 获取数据;none 正常模式 | ✅ |
[reName] | string | - | 重命名返回参数,例如:null 返回体为内容list 返回体应 { list: [] } result.list 返回体应 { result: { list: [] } } | ✅ |
[expire] | number | - | 设置默认过期时间值(单位:秒) | ✅ |
[prefix] | string | - | 持久化数据键值前缀 | ✅ |
[meta_key] | string | __cache_meta | 持久化数据元数据存储键名 | ✅ |
[request] | (key: string) => Observable<unknown> | - | 自定义请求体 | ✅ |
可以通过全局配置覆盖它们。
value:
import { JsonPipe } from '@angular/common';
import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { CacheService } from '@yelon/cache';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'cache-getting-started-simple',
template: `
<p>value: {{ value | json }}</p>
<div class="pt-sm">
Basic:
<button nz-button (click)="srv.set(key, newValue)">Set</button>
<button nz-button (click)="value = srv.getNone(key)">Get</button>
<button nz-button (click)="srv.remove(key)">Remove</button>
<button nz-button (click)="srv.clear()">Clear</button>
</div>
<div class="pt-sm">
Key is valid request:
<button nz-button (click)="getByHttp()">Get</button>
</div>
<div class="pt-sm">
Notify:
<button nz-button (click)="registerNotify()">Register</button>
<button nz-button (click)="unRegisterNotify()">UnRegister</button>
</div>
`,
standalone: true,
imports: [JsonPipe, NzButtonModule]
})
export class CacheGettingStartedSimpleComponent implements OnDestroy {
value: any;
key = 'demo';
private notify$?: Subscription;
get newValue(): number {
return +new Date();
}
constructor(
public srv: CacheService,
private msg: NzMessageService
) {}
getByHttp(): void {
this.srv.get(`https://randomuser.me/api/?results=1`).subscribe(res => {
this.value = res;
});
}
registerNotify(): void {
if (this.notify$) this.notify$.unsubscribe();
this.notify$ = this.srv.notify(this.key).subscribe(res => {
if (res == null) {
this.msg.success('register success');
return;
}
this.msg.warning(`"${this.key}" new status: ${res.type}`);
});
}
unRegisterNotify(): void {
this.srv.cancelNotify(this.key);
}
ngOnDestroy(): void {
if (this.notify$) this.notify$.unsubscribe();
}
}