SAP 电商云 Spartacus UI 修改 Delivery Mode 触发的三个 HTTP 请求(一)

简介: SAP 电商云 Spartacus UI 修改 Delivery Mode 触发的三个 HTTP 请求

LoaderState:


loading 状态在 true 和 false 之间的切换,通过 loader

.reducer.ts 里的 reducer 函数进行。每次通过 store.dispatch 往 store 里投递新的 action 时,都会触发该 reducer 的执行。

62.png

添加上打印日志:

63.png

设置 delivery mode 的用户点击,触发一个 put 请求,两个 get 请求:

64.png

4秒的 proces 从 loading 到 loaded

2秒的 Multi Cart Data 从 loading 到 loaded

3秒的 Checkout Details 从 loading 到 loaded

65.png

为什么会打印两次?

66.png

从时间轴能看出是串行关系:

67.png

HTTP PUT 先执行完,然后才是 cart 数据的读取。

完整的时间轴:

68.png

69.png

逐一解答。


process

当我点击 radio input 之后,通过了下图 245 行 filter projection 的考验之后,进入 251 行 store.dispatch 操作。因此,如果当前 cart 不 stable,并且 checkout Service 处于 loading 状态时, 不会执行到 251 行:

71.png

当前 isLoading 为 false,只有这样才能通过 245 行的 filter 操作:

1.png

checkout Store 是构造函数依赖注入的 store API.

所以 process 就是 setDeliveryMode 的 entity 类型。

2.png

上图的 dispatch 操作,居然会触发到我应用代码里的 tap hook. 这是期望中的行为,因为 deliveryModeSetInProcess 通过 combineLatest 返回,从语义上说,checkoutService 的 loading 状态,和 Checkout Delivery Service 的 getSetDeliveryModeProcess 方法,只要有任意发生变化,都会触发 deliveryModeSetInProcess$ 的 subscribe 执行。

3.png这个常量好面熟:

4.png

tap 这里为什么是 true?

5.png因为这里是 true:

6.png

7.png会调用两次,打印第二次 tap hook。如果不用 combineLatest,会不会还是有这个行为?

8.png

9.png标志着 delivery mode set 完成:

10.png

tap hook 再次触发:

11.png

这次就看不到明显的是通过 application code 来触发的痕迹:

image.png并不是通过下图这段代码触发的:

13.png

紧接着,开始 load cart 数据了:Multi Cart Data

14.png

15.png


3.png


目录
相关文章
|
1月前
|
JSON 监控 API
掌握使用 requests 库发送各种 HTTP 请求和处理 API 响应
本课程全面讲解了使用 Python 的 requests 库进行 API 请求与响应处理,内容涵盖环境搭建、GET 与 POST 请求、参数传递、错误处理、请求头设置及实战项目开发。通过实例教学,学员可掌握基础到高级技巧,并完成天气查询应用等实际项目,适合初学者快速上手网络编程与 API 调用。
359 130
|
2月前
HTTP协议中请求方式GET 与 POST 什么区别 ?
GET和POST的主要区别在于参数传递方式、安全性和应用场景。GET通过URL传递参数,长度受限且安全性较低,适合获取数据;而POST通过请求体传递参数,安全性更高,适合提交数据。
438 2
|
3月前
|
Go 定位技术
Golang中设置HTTP请求代理的策略
在实际应用中,可能还需要处理代理服务器的连接稳定性、响应时间、以及错误处理等。因此,建议在使用代理时增加适当的错误重试机制,以确保网络请求的健壮性。此外,由于网络编程涉及的细节较多,彻底测试以确认代理配置符合预期的行为也是十分重要的。
182 8
|
2月前
|
JSON JavaScript API
Python模拟HTTP请求实现APP自动签到
Python模拟HTTP请求实现APP自动签到
|
2月前
|
数据采集 JSON Go
Go语言实战案例:实现HTTP客户端请求并解析响应
本文是 Go 网络与并发实战系列的第 2 篇,详细介绍如何使用 Go 构建 HTTP 客户端,涵盖请求发送、响应解析、错误处理、Header 与 Body 提取等流程,并通过实战代码演示如何并发请求多个 URL,适合希望掌握 Go 网络编程基础的开发者。
|
3月前
|
缓存 JavaScript 前端开发
Vue 3 HTTP请求封装导致响应结果无法在浏览器中获取,尽管实际请求已成功。
通过逐项检查和调试,最终可以定位问题所在,修复后便能正常在浏览器中获取响应结果。
197 0
|
3月前
|
Go
如何在Go语言的HTTP请求中设置使用代理服务器
当使用特定的代理时,在某些情况下可能需要认证信息,认证信息可以在代理URL中提供,格式通常是:
318 0
|
5月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
191 15
|
5月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
195 11
|
1月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
203 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例

热门文章

最新文章