在 angular 服务中缓存数据

Question

I am have written an agreements service and need to fetch the data once it is retrieved. The next time it should check the data if it exists and return the value from that variable. I have declared a variable called private data: AgreementsModel[]; How do I do that check in my service method

@Injectable()
export class AgreementsService {
  private baseUrl: string;
  private data: AgreementsModel[];

  constructor(private http: HttpClient, private appService: AppConfigService, public store: Store) {
    this.baseUrl = this.appService.getAppSettings().apiServer.agreements;
  }


  public getOutstandingAgreements(userAgreementId?: number): Observable<AgreementsModel[]> {
    let params = new HttpParams();
    if (userAgreementId) {
      params = params.set('userAgreementId', userAgreementId.toString());
  }

   return this.http.get<AgreementsModel[]>(`${this.baseUrl}outstanding-agreements`, {params});
  }

}

I have tried to do the following but getting compile error at line return this.data. The type AgreementModel[] is missing the following properties from type Promise.

 public  getOutstandingAgreements(userAgreementId?: number): Promise<any> {
    let params = new HttpParams();
    if (userAgreementId) {
      params = params.set('userAgreementId', userAgreementId.toString());
    }

   if (this.data) {
    return this.data;
  }
    const result =  this.http.get<AgreementsModel[]>(`${this.baseUrl}outstanding-agreements`, {params})
                                                                   .pipe(map((x) => {this.data = x; })).toPromise();
    return result;
  }

Answer 1

If you want to cache it independent of the browser-session, the best solution is to use the IndexDB of the browser. I have created an indexDB-Service for managing it, but this one needs some improvements for upgrading if you want to use it in production.

export class IdbService {
  static STORES = {
    AGREEMENTS: 'agreements'
  };

  async getDb() {
    return await openDB('my-db', 1, {
      upgrade(db) {
        for (const key in IdbService.STORES) {
          const storeName = IdbService.STORES[key];
          if (!db.objectStoreNames.contains(storeName)) {
            db.createObjectStore(storeName);
          }
        }
      }
    });
  }
}

I have changed the service to work with promises. Of course you can change it a little bit to work with observables.

export class AgreementsService {
  private baseUrl: string;
  private data: AgreementsModel[];

  constructor(
    private idbService: IdbService,
    private http: HttpClient, 
    private appService: AppConfigService, 
    public store: Store
  ) {
    this.baseUrl = this.appService.getAppSettings().apiServer.agreements;
  }


  public async getOutstandingAgreements(userAgreementId?: number): Observable<AgreementsModel[]> {
    let params = new HttpParams();
    if (userAgreementId) {
      params = params.set('userAgreementId', userAgreementId.toString());
    }

    const key = `outstanding-agreements__${userAgreementId.toString()}`;
    const db = await this.idbService.getDb();

    let result = await db.get(IdbService.STORES.AGREEMENTS, key);
    if (result ?.length) {
      return result ;
    }

    const result = await this.http.get<AgreementsModel[]>(`${this.baseUrl}outstanding-agreements`, {params}).toPromise();

    await db.put(IdbService.STORES.AGREEMENTS, result, key);
    return result;
  }

}