Angular 架构：如何使用多个 HTTP 服务处理 state 持久性？

Question

我想知道你应该如何构建一个调用后端的应用程序。

在服务中包装 HTTP 调用似乎是一种自然的做事方式，但是如何/在哪里保存数据以保持一致性？ 例如，我有一个显示某种 Todo 列表的组件，该列表是从后端OnInit检索的。 现在，当从这个组件路由并再次路由回来时，它的所有数据都会被重置。 当然，您可以再次调用后端，但将数据保存在某种服务（甚至是 HTTP 服务）中以供进一步使用不是更有利吗？

进一步澄清：

class Service {

    storedData: number[] = []
    allObjects: BehaviorSubject<any> = new BehaviorSubject()

    ...


    getObj(id) {
        if (!this.storedData.includes(id)) {
            this.getDataFromServer(id)
        }
        return this.allObjects.pipe(
            map(objects => objects.find(obj => obj.id === id)),
            filter(obj  => obj && true)
        )
    }

    getDataFromServer(id) {
        return this.http.get(id).pipe(
            tap(obj => {
                this.storedData.push(id)
                this.allObjects.put(id, obj)
            })
        )
    }
}

这是一种可行的方法还是有其他方法来处理这种情况？

此外，go 使用 object 的最佳方法是什么，它需要多个服务来填充其所有字段。 （Obj: {a: number, b: number} ， a由AService检索， b由BService检索）。

您会将这些对象存储在哪里（在AService中注入BService并将其存储在BService中/将两者都注入到向请求组件提供数据的第三个服务中）？

存储它的最佳方式是什么？

Answer 1

Victor Savkin, former core Angular team member at Google who built the dependency injection, change detection, forms, and router modules, wrote an excellent article on Managing State in Angular Applications .

他为 web 应用程序确定了六种常见的状态类型：

• 服务器 state
• 持久 state
• URL 和路由器 state
• 客户端 state
• 瞬态客户端 state
• 本地用户界面 state

关键点

• 服务器 state存储在服务器上，并通过例如 REST 端点提供
• 持久性 state是服务器 state 存储在客户端上的子集，在 memory
• 客户端 state （如用于创建项目列表的过滤器）未存储在服务器上
• 建议：在 URL 中反映持久性和客户端 state 是一种很好的做法。

This means that a component would update the URL parameters to reflect the persistent state (ie server state that is being cached on the client in memory) as well as client state, such as selected filters. URL 参数可以为 state 被持久化的每个服务添加。

持久化的 state 存储在 Angular 服务中，其中每个功能单元通常有一个服务，例如待办事项列表服务、用户服务和日志服务。 这些服务中的每一个都将在幕后处理 state 持久性。 例如，当请求数据时，服务会首先检查数据是否已经从服务器获取，只有当数据丢失时，才进行 HTTP 调用。

由于服务是长期存在的，因此数据可能会在用户 session 的整个期间持续存在。

Answer 2

使用 observable 更好地缓存。 这里有一篇非常好的文章： https://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

例子：

 getFriends(){
    if(!this._friends){
      this._friends = this._http.get('./components/rxjs-caching/friends.json')
                                   .map((res:Response) => res.json().friends)
                                   .publishReplay(1)
                                   .refCount();
    }
    return this._friends;
}

有关发布重播的更多信息，请查看https://riptutorial.com/rxjs/example/27953/how-does-publishreplay-work

Answer 3

使用 NgRx 使用集中存储。 https://ngrx.io/

Answer 4

因此，首先，每当您从任何页面路由回特定的 url 时，因为您的 OnInit 中有您的服务，所以您的后端将被调用。

但是具体来说，如果您希望在路由返回时不调用后端，那么您可以在组件中使用 RouteReuseStrategy 的概念，但我认为这将是一个损失，因为每当您从浏览器路由回该页面时，您的后端不会被调用，但您的数据已过时。