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

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

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

在服务中包装 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}aAService 检索,bBService 检索。

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

最好的存储方式是什么?

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

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

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

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

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

要点

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

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

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

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