Как организовать кэширование API запросов в Angular 2?

Question

[beta-it]

Есть приложение на Angular 2, которое делает достаточно большое количество запросов к серверу, при навигации по компонентам, может кто нибудь знает как этого можно избежать?

Answer 1

[ozknemoy]

вот метод из сервиса. key под каждый url свой. есть еще способ как в репо angular-universal. там мудренее но зато можно не повторять запросы которые делал сервер node

getUsersActivity(forceRefresh?:boolean) {
return this.getWithCache (
'user-activity',
'usersActivity$', forceRefresh)
};

getWithCache(url, key, forceRefresh?:boolean):any {
     
       if (!this[key]) {
            this[key] = new ReplaySubject(1)
        }

        // If the Subject was NOT subscribed before OR if forceRefresh is requested
        if (!this[key].observers.length || forceRefresh) {
            this.get(url).subscribe(
                (data) => this[key].next(data),
                (error) => {
                    this[key].error(error);
                    // Recreate the Observable as after Error we cannot emit data anymore
                    this[key] = new ReplaySubject(1);
                }
            );
        }

        return this[key];
    }

Comments

[beta-it]

М.б. какое нибудь демо есть или пример более полный!?

[ozknemoy]

примера нет, тк использую теперь серверный кеш, но метод проверенный. там же все просто. в контроллере вызываю метод из сервиса например this.httpService.getWithCache('https://api.github.com/users/peterbe','user_peterbe')

[ozknemoy]

при повторном вызове мы получим кеш this['user_peterbe']

[beta-it]

Спасибо, просто по работе пришлось столкнутся, раньше вообще не работал angular)))