SAP 电商云 Spartacus UI 设置 Delivery Mode 的时序分析和一个竞争条件问题分享

简介: SAP 电商云 Spartacus UI 设置 Delivery Mode 的时序分析和一个竞争条件问题分享

(1) State.loading这个值存储在什么地方的?

(2) 什么时候变为 true?什么时候变为 false?


Component/service 需要消费存储在 store 中的数据,通过 Store 和 Selector 完成。

例子:

Component 需要改变 store 中的数据时,不能直接修改 store,通过 action 和 store:246 行

Action 触发 reducer,一个有限状态自动机。不能直接修改状态,只能根据当前状态,返回新的状态。

Loading:true

从 loading:false 跳转到 loading: true, 中间经过了哪些步骤?

只有 Cart stable 和 checkout 数据加载完成时,才能调用 HTTP PUT:

从上面的代码能看出:

Wait?

在 3G 网络下,我匀速点了8次:第一次点击的是 standard delivery

console.log 显示每一次点击都会触发一次 HTTP 请求,但不一定是即时触发,有排队现象。

所以,当我点了 radio input 之后,如果不满足 cart stable = true,checkout loading = false 的前提,HTTP PUT 就发不出去,loading 状态就没办法变为 true.


问题转而变为研究 cart stable 和 checkout loading 的变化规律。成功设置 DeliveryMode 之后,就触发 Cart 加载:

Cart 加载完毕之后,就会通过代码第59行加载 checkout detail.

因此,delivery mode(HTTP PUT)和 cart,checkout loading,是三个串行的 HTTP 操作。


ac1586b7c66b602d1c113d72b676425b.png


第一次点击发生在 t0,如果第二次点击发生在 t3 之后,则没有任何问题。

如果第二次点击发生在 t1~t3 之间(3G 网络),就会出现问题。

5109e7c3de429481eeb605396c305603.jpg最终解决方案:

用 delivery mode,cart stable, checkout loading 三个因素同时控制。

相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版