SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计

简介: SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计

在客户端渲染即 CSR 模式下,我们能在 Chrome 开发者工具里观测到大量根据 product code 读取产品主数据的 HTTP 请求:

51.png响应结果:

image.png

上面的数据,对应屏幕里这个产品:300938

52.png

通过 cx carousel 这个控件发起的 HTTP 请求:

53.png

这个高亮区域是 template:

54.png即:

55.png

这个 template 是 carousel 的消费者在 html 里传入的:

image.png

消费者之一就是 cx-product-carousel:

56.png

57.png

product carousel 里的产品列表来自 productCodes 字段,通过 this.productService.get 根据产品 code 读取产品主数据。


58.png

数据源来自依赖注入的 componentData.

image.png

什么时候被填充呢?

image.png

productCodes 的运行时数据:

image.png

准备渲染 ProductCarousel Component:

59.png

先得取得 ComponentData 的依赖:

image.png

找到了该依赖的 provide 记录:

61.png

62.png

调用 dataprovider,根据 uid 和 type 取得 ComponentData:

64.png

这里采取了一个延迟加载,当 Observable 被 subscribe 时,再执行:

65.png

什么时候被 subscribe 呢?答案如下:

66.png

items$ 的数据也来自 ComponentData:

67.png

ComponentData 数据读取,通过 cms service 完成:

image.png

从 store 里读取:

69.png

目录
相关文章
|
24天前
|
XML Java 数据格式
Servlet 教程 之 Servlet 客户端 HTTP 请求 3
该教程展示了如何在Servlet中处理客户端HTTP请求,特别是获取HTTP头信息。示例代码创建了一个名为`DisplayHeader`的Servlet,它扩展了`HttpServlet`并重写了`doGet`方法。在`doGet`中,使用`HttpServletRequest`的`getHeaderNames()`遍历所有头部,显示其名称和对应值。Servlet在TomcatTest项目下,通过`web.xml`配置映射到`/TomcatTest/DisplayHeader`路径。
31 14
|
24天前
|
安全 Java 网络安全
Servlet 教程 之 Servlet 客户端 HTTP 请求 2
Servlet教程介绍了如何在Servlet中处理HTTP请求,包括获取Cookie、头信息、参数、Session等。方法如:`getCookies()`、`getAttributeNames()`、`getHeaderNames()`、`getParameterNames()`等。还能获取身份验证类型、字符编码、MIME类型、请求方法、远程用户信息、URL路径、安全通道状态以及请求内容长度等。此外,可通过`getSession()`创建或获取Session,并以`Map`形式获取参数。
24 8
|
4天前
|
API Apache Android开发
对于Android的http请求的容错管理
对于Android的http请求的容错管理
|
5天前
|
JSON 数据格式 Python
Python 的 requests 库是一个强大的 HTTP 客户端库,用于发送各种类型的 HTTP 请求
【5月更文挑战第9天】`requests` 库是 Python 中用于HTTP请求的强大工具。要开始使用,需通过 `pip install requests` 进行安装。发送GET请求可使用 `requests.get(url)`,而POST请求则需结合 `json.dumps(data)` 以JSON格式发送数据。PUT和DELETE请求类似,分别调用 `requests.put()` 和 `requests.delete()`。
16 2
|
6天前
|
API
http代理ip请求并发数是什么?有什么用?
HTTP代理IP请求并发数指单个客户端对API或代理IP同时发起的请求数量,分为API链接请求并发和IP最大连接数。并发是瞬时同时请求,不同提供商限制不同。高并发请求的代理IP服务商能更好地应对程序压力。选择时应考虑这一因素。
|
6天前
|
Go
深度探讨 Golang 中并发发送 HTTP 请求的最佳技术
深度探讨 Golang 中并发发送 HTTP 请求的最佳技术
|
7天前
|
API UED Python
使用Python进行异步HTTP请求的实践指南
使用Python进行异步HTTP请求的实践指南
19 4
|
14天前
|
缓存 负载均衡 网络协议
【亮剑】一次完整的HTTP请求的重要性和详细过程
【4月更文挑战第30天】本文介绍了HTTP请求的重要性和详细过程。首先,DNS解析将域名转换为IP地址,通过递归和迭代查询找到目标服务器。接着,TCP三次握手建立连接。然后,客户端发送HTTP请求,服务器处理请求并返回响应。最后,理解这个过程有助于优化网站性能,如使用DNS缓存、HTTP/2、Keep-Alive、CDN和负载均衡等实践建议。
|
15天前
|
JSON 编解码 Go
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第25天】Go语言`net/http`包提供HTTP客户端和服务器功能,简化高性能网络应用开发。本文探讨如何发起HTTP请求,常见问题及解决策略。示例展示GET和POST请求的实现。注意响应体关闭、错误处理、内容类型设置、超时管理和并发控制。最佳实践包括重用`http.Client`,使用`context.Context`,处理JSON以及记录错误日志。通过实践这些技巧,提升HTTP编程技能。
25 1
|
16天前
|
前端开发 API UED
AngularJS的$http服务:深入解析与进行HTTP请求的技术实践
【4月更文挑战第28天】AngularJS的$http服务是核心组件,用于发起HTTP请求与服务器通信。$http服务简化了通信过程,通过深入理解和实践,能构建高效、可靠的前端应用。