Предварительная выборка данных из всех API с помощью Angular сервис-воркера

Question

Я хотел бы предварительно выбрать и кэшировать данные из всех API, которые определены в массиве группы данных. Данные должны быть извлечены и кэшированы, даже если пользователь не посещал соответствующие страницы или не выполнял функции, которые выполняют эти вызовы. В моем случае автономная поддержка без предварительной выборки данных бесполезна.

Есть ли способ предварительно получить данные API, поскольку Angular предоставляет ресурсы, или мне нужно сделать несколько фиктивных вызовов API для всех API, которые я указал в группах данных?

TIA

Answer 1

Я развернул образец службы, чтобы объяснить вам, как вызвать сервер только один раз.

https://stackblitz.com/edit/stack-overflow-62018147

• Вы должны подписаться на api вызов в службе конструктора, чтобы вызвать его, когда он вводится в компонент
• Затем вам нужно сохранить ответ в частной переменной внутри службы, и если это значение равно нулю, вы можете вызвать api rest. В другом случае вы можете вернуть содержимое частной переменной

    constructor(private http: HttpClient) {
      this.getNations().subscribe(); //The constructor is called when service is injected
    }

    public getNations(): Observable<INation []> {
        const url: string = this.backendURL + "places/nations";
        //this is the caching mechanism
        const nations$: Observable<INation []> = (!! this.nations) ? 
          of(this.nations.map((nation: INation) => cloneDeep(nation)))
            .pipe(
              tap((nations: INation []) => console.log("Returning cached response...", JSON.stringify(nations)))
            ) : 
          this.http.get<INation []>(url);
        //------------------------
        return nations$.pipe(
            tap((nations: INation []) => this.nations = nations),
            catchError(() => {
              console.error("Http Error, returning MOCK. If you see in network, this is called only one time.");
              this.nations = cloneDeep(this.nations_MOCK);
              return of(this.nations);
            })
        );
    }