Angular 架构：如何处理多个 HTTP 服务的状态持久化？

Question

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

在服务中包装 HTTP 调用似乎是一种自然的做事方式，但是您如何/在哪里保存数据以保持一致性？例如。我有一个显示某种待办事项列表的组件，它是从后端 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)
            })
        )
    }
}

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

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

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

最好的存储方式是什么？

Answer 1

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

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

Answer 2

Google 的前核心 Angular 团队成员 Victor Savkin 构建了依赖注入、变更检测、表单和路由器模块，他在 Managing State in Angular Applications 上写了一篇出色的文章。 =11=]

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

服务器状态
持久状态
URL和路由器状态
客户端状态
瞬态客户端状态
本地UI州

要点

服务器状态 存储在服务器上，例如通过 REST 端点
持久状态是存储在客户端内存中的服务器状态的子集
客户端状态（例如用于创建项目列表的过滤器）未存储在服务器上
建议：在 URL.[=40 中反映持久化状态和客户端状态是一个很好的做法=]

这意味着组件将更新 URL 参数以反映持久状态（即缓存在客户端内存中的服务器状态）以及客户端状态，例如选定的过滤器。 URL 可以为要保留状态的每个服务添加参数。

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

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

Angular 架构：如何处理多个 HTTP 服务的状态持久化？

Angular Architecture: How to handle state persistence with multiple HTTP Services?

angular

frontend

persistence

front-end-optimization

要点