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

LoaderState:

loading 状态在 true 和 false 之间的切换,通过 loader
.reducer.ts 里的 reducer 函数进行。每次通过 store.dispatch 往 store 里投递新的 action 时,都会触发该 reducer 的执行。

添加上打印日志:

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

4秒的 proces 从 loading 到 loaded
2秒的 Multi Cart Data 从 loading 到 loaded
3秒的 Checkout Details 从 loading 到 loaded


为什么会打印两次?

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

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

完整的时间轴:

逐一解答。

process

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

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

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

所以 process 就是 setDeliveryMode 的 entity 类型。

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

这个常量好面熟:

tap 这里为什么是 true?

因为这里是 true:

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

标志着 delivery mode set 完成:

tap hook 再次触发:

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

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

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

从调用栈能看出,准备加载 multi cart :

我现在希望通过代码调试,找到具体是哪一行抛出的 action:

从调用栈里没找到也没关系,通过源代码搜索也很好找:

[Cart] Load Cart
从 callstack 真的没有找到:

setDeliveryModeSuccess 之后,立即重新 LoadCart:

cart 数据加载完毕:

checkout detail 又开始加载了:

这个 checkout detail,会影响我们这个 in process$:

48 行的 isLoading 又变为 true了,这会导致 UI option 重新处于 disabled 状态。
等 checkout details 执行成功后,UI 重新处于可编辑状态:

[Checkout] Checkout Details

Checkout 触发代码:


为什么设置 delivery mode,会触发 59行代码?


当 cart 的 stable 状态发生变化时,就会触发59行的回调,可以理解成依赖。



通过这段代码验证:

import './style.css';import { combineLatest, interval, tap } from 'rxjs';const number1 = interval(1000);const number2 = interval(5000);const combined = combineLatest([number1, number2]);const tapped = combined.pipe(tap(([number1, number2]) =>console.log('number1: ', number1, ' number2', number2))
);tapped.subscribe();

输出:

combinedLatest 输入参数有任意一个 Observable 发生了变化,则 tap 都会触发。

现在的问题是,从我点了 input radio 之后,“Premium Delivery”:


sequential:

更多Jerry的原创文章,尽在:“汪子熙”:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/14485.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

再送签名书20本、红包封面10000个

大家好,我是北妈 福利又来了,由于北妈红包封面抢手,又增加了 10000个,没领到的赶紧转发,让亲朋好友来领取。 然后下面送签名书喽。 1、送书 又到了送北妈签名书的时候,凑着要放假,赶紧上车关门&…

vue3.0 非常面熟的错误

1,标签错误 ​​​​ 错误文件所在的目录 \src\views\HomeView.vue:2:3 没有结束标签~ 2.编译问题 Compiled with problems: 编译问题 C:\myel\src\views\HomeView.vue 错误出现文件 3:1 error Mixed spaces and tabs no-mixed-spaces-and-tabs 4:1 error M…

Chat GPT5的主要介绍

Chat GPT-5是一种基于人工智能技术的对话系统,用于进行自然语言处理和对话,以提供更好的服务。 它是由OpenAI公司开发的,是GPT系列的最新版本。 GPT代表着"生成式预训练",因此Chat GPT-5基于神经网络,通过预…

ChatGPT:探索RLHF与GPT的完美结合

前言 ChatGPT已经发布一周了热度依旧不减,ChatGPT也各种大显神通,为各大网友“出谋划策”,有写周报的,有写绩效的甚至还有写论文的,作为一个NLP从业者,除了好好体验下其中的乐趣,其背后的原理当…

一场场网络时代的“墨攻”

编辑:阿冒 设计:沐由 公输般为楚造云梯之械成,将以攻宋。子墨子闻之,起于鲁,行十日十夜,而至于郢,见公输般。 子墨子解带为城,以牒为械,公输般九设攻城之机变&#xff0c…

人工智能在网络犯罪中的应用:5个最重要的趋势

在当今的数字世界中,网络威胁不断演变。 人工智能的使用虽然在网络犯罪中还不是必须的,但无疑是我们将在未来几年看到的具有重大发展的最有前途的技术之一。 随着 AI 技术的进步,攻击者开始尝试新的、越来越复杂和有效的攻击模式和技术。 …

【CICC原创】大模型技术发展研判及应用思考

来源:中国指挥与控制学会 蒲志强,研究员,中国科学院自动化研究所 近年来,随着人工智能(Artificial Intelligence, AI)技术的深化发展,大模型(Large Model,也称基础模型,即…

从ChatGPT看人工智能的军事应用

来源:中国军网 今年3月中旬,聊天机器人程序ChatGPT推出了最新版本GPT-4,可支持多元的输入输出形式,使其具备了更强的专业学习能力。作为一种基于人工智能(以下简称AI)技术的聊天程序,ChatGPT一经推出&#…

ChatGPT全面升级,GPT4支持多模态数据。

Open AI在3月14日放了大招,GPT4. 不同于ChatGPT,GPT4是支持多模态数据,目前上去看了下,支持图片和文本两种数据格式。 另外,宣传视频中说:GPT4去年8月就完成了训练,只是为了数据和使用安全方…

揭秘中国开发者真实现状:月薪 8k-17k 占比骤减!

作者 | 郑丽媛 出品 | CSDN(ID:CSDNnews) 瞬息万变的技术圈,似乎随时都在给予技术人数不清的机遇与挑战: 过去一年,频繁出圈的虚拟人曾一度将元宇宙的热度推至巅峰,如今却逐渐“悄无声息”&…

中文互联网正在被AI污染

有没有发现,如今,AI越来越火,但AI生成的垃圾信息也越来越多了。 如果你打开知乎,很大几率会看到AI生成的回答,它们简短、概括性十足,看了等于没看。打开今日头条,你也有很大几率看到用ChatGPT生…

写好“提示”改变“智造未来”-GPT4提示词驶入代码优化驾驶座心得

开篇 在前端科技的新浪潮中,Artificial Intelligence (AI)的逐渐成熟与发展引领着我们向前。其中OpenAI的GPT4提供了我们一种新的可能,帮助我们优化代码,使编程变得更加轻松。在这篇文章中,我们将一同探究如何在1-2分钟内,依靠GPT的提示词优化我们的代码,并展现出我们在…

惊天大绝招-用话术诱导GPT掏出图片来!

开篇 今天我要开大家的眼界!来给大家揭示一个运用Prompts的小诡计。 这个技巧的亮点就在于,即使现在的ChatGPT(适应4版本哦)还没学会把画面呈现出来,我们依然可以借助这个小技巧,让它以图画的形式呼应我们的问题。 对于我们聪明的听众们,我要揭晓的第一件事是这个技巧…

比ChatGPT还好用?收藏10+免费实用的AI工具,轻松提高办公效率

ChatGPT的爆火引发了AI工具的热潮,阿强通过这一段时间对AI工具观察和体验过后,帮大家整理了10好用AI工具,可以应用在不同的工作场景中,比如AI设计、AI办公、AI自媒体,帮你轻松提高工作效率,上班摸鱼也能升值…

ChatGPT 提示语——AI提示词玩家,提示词就是和AI沟通语言的桥梁!

前言: 众所周知,在AI的世界里,提示词就是和AI沟通语言的桥梁,提示关键词常用于AI对话及AI绘画等相关场景,通过准确的使用关键词,你就能更好的让AI辅助自己的工作,其中的成分重要性不言而喻&…

ChatGpt基于第三方API2D服务封装的SpringBoot starter

前置条件&#xff1a; 看下API2D官网&#xff0c;第三方API2D服务对接流程&#xff1a; 其对接文档地址 https://api2d.com/wiki/doc 一:创建一个空的Maven项目 完成后整的项目层级图如下 1.pom.xml 中添加相关依赖包 <?xml version"1.0" encoding"UTF-…

ChatGPT开发【一】:打造与ChatGPT默契互动的绝佳输入格式

点击加入->【OpenAI-API开发】技术交流群 文章目录 1. 导入openai库2.示例聊天API调用3.GPT-3.5-Turbo-0301的使用技巧系统消息Few-show prompt 4.计数Token数 Chatgpt由Openai最先进的型号 gpt-3.5-Turbo和 gpt-4提供支持。我们可以使用OpenAI API使用 GPT-3.5-Turbo或…

不知不觉被安利了ChatGPT

近期ChatGPT热度持续不下&#xff0c;尤其是在IT行业更是聊的火热&#xff0c;于是去查了一下&#xff1a; ​ ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;美国OpenAI [1] 研发的聊天机器人程序 [12] &#xff0c;于…

AI之JARVIS:JARVIS(连接众多 AI 模型以解决复杂 AI 任务的接口/可理解为一种超智能AI模型管家,正开发中)的简介、安装、使用方法之详细攻略

AI之JARVIS&#xff1a;JARVIS(连接众多 AI 模型以解决复杂 AI 任务的接口/可理解为一种超智能AI模型管家&#xff0c;正开发中)的简介、安装、使用方法之详细攻略 目录 JARVIS(一种超智能AI模型管家)的简介 JARVIS(一种超智能AI模型管家)的安装 1、硬件要求 2、获取Key 3…

AIGC:【LLM(三)】——JARVIS:连接ChatGPT和HuggingFace解决AI问题

文章目录 0.摘要1.引言2.相关工作3.HuggingGPT3.1 任务规划3.2 模型选择3.3 任务执行3.4 响应生成 4.限制5.结论6.参考资料 0.摘要 解决具有不同领域和模态的复杂人工智能任务是通往人工通用智能的关键骤。尽管存在丰富的适用于不同领域和模态的人工智能模型&#xff0c;但它们…