This article has not been translated, hope that your can PR to translated it. Help us!

开始使用

写在前面

通常把一些远程数据缓存在内存或 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,nonepromise缓存模式;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:

Basic:
Key is valid request:
Notify:
基础样例

最简单的用法。

expand code expand code
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();
  }
}
Loading...