Question

我正在将Angular v1.4应用程序迁移到v5（希望在新的一年中是v6）。

应用程序具有许多组件，例如标题，选项卡，网格，图像，身份验证等。

每个组件都使用特定的http.get来获取系统和用户首选项，并缓存结果以避免应用程序重复使用同一http.get。

看起来RxJS是一个功能强大的库，可以使用它。似乎有很多用RxJS实现此缓存的示例，方法和视图。

想分享我在v5应用程序中所做的事情并获得反馈。在DevTools中检查该应用程序，似乎只执行了1个http.get，因此看起来可行。.

systemPreferences.service.ts：

const CACHE_SIZE = 1;

export class SystemPreferences {
    private $cache: Observable<Object>

    private requestConfig() {
         return this.http.get("www.someurl.com").pipe(
             map(response => response.value)
         );
    }

    public getPreferences() {
        if (!this.cache$) {
            this.cache$ = this.requestConfig().pipe(
             shareReplay(CACHE_SIZE)
            );
        }

        return this.cache$;
    }
}

header.component.ts：

ngOnInit() {
    this.systemPreferences.getPreferences()
        .subscribe(
            (result: any) => {
                this.headerTitle = result.title || '';
            },
            (err) => {
                console.log('there has been an error');
            },
            () => // Some completion code
        );
}

routingGuard canActivate，制表符等的相同组件代码

RxJS缓存Http结果

0 个答案: