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}
,a
由 AService
检索,b
由 BService
检索。
您会将这些对象存储在哪里(将 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 调用。
由于服务是长期存在的,因此数据可能会在整个用户会话期间持续存在。
我想知道您应该如何构造一个调用后端的应用程序。
在服务中包装 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
中/将两者都注入到向请求组件提供数据的第三方服务中)?
最好的存储方式是什么?
因此,首先,当您从任何页面路由回特定 url 时,因为您的服务在 OnInit 中,所以您的后端将被调用。
但具体来说,如果你希望在返回时不调用你的后端,那么你可以在你的组件中使用 RouteReuseStrategy 的概念,但我认为这将是一个损失,因为每当你从浏览器到那个页面,你的后端不会被调用,但是你的数据已经过时了。
Google 的前核心 Angular 团队成员 Victor Savkin 构建了依赖注入、变更检测、表单和路由器模块,他在 Managing State in Angular Applications 上写了一篇出色的文章。 =11=]
他确定了 Web 应用程序的六种常见状态类型:
- 服务器状态
- 持久状态
- URL和路由器状态
- 客户端状态
- 瞬态客户端状态
- 本地UI州
要点
- 服务器状态 存储在服务器上,例如通过 REST 端点 提供
- 持久状态是存储在客户端内存中的服务器状态的子集
- 客户端状态(例如用于创建项目列表的过滤器)未存储在服务器上
- 建议:在 URL.[=40 中反映持久化状态和客户端状态是一个很好的做法=]
这意味着组件将更新 URL 参数以反映持久状态(即缓存在客户端内存中的服务器状态)以及客户端状态,例如选定的过滤器。 URL 可以为要保留状态的每个服务添加参数。
持久状态存储在 Angular 服务中,其中每个功能单元通常有一个服务,例如待办事项列表服务、用户服务和日志记录服务。这些服务中的每一个都将在幕后处理状态持久性。例如,当请求数据时,服务会首先检查数据是否已经从服务器获取,只有当数据丢失时,才进行 HTTP 调用。
由于服务是长期存在的,因此数据可能会在整个用户会话期间持续存在。