Spartacus payment types 在 checkout 步骤中发送 HTTP put 请求的实现明细

简介: Spartacus payment types 在 checkout 步骤中发送 HTTP put 请求的实现明细

我在我本地的开发环境,执行批处理程序 b2c.bat 可以正常运行 4.3.x 这个版本的 Spartacus,但是 5.0 即 develop 分支就不行,报这个错误:

d288628c10cd4f7bf93d36b3a35de32a.png

$ info “fsevents@2.3.2” is an optional dependency and failed compatibility check. Excluding it from installation. error @typescript-eslint/utils@5.37.0: The engine “node” is incompatible with this module. Expected version "^12.22.0 || ^14


使用命令行 where ng,发现 Angular CLI 的可执行文件 ng 的位置,是基于 node v14 这个版本的文件夹下面。

690e1300c210c0598e599e4e3f03074d.png

环境变量如下,PATH 环境变量的值:

a41939c39f877173901a7d2dfd0250a2.png

我在上图将 path 环境变量里的 Node.js 配置成 16,但是 Angular CLI 仍然是老的 12 版本,所以需要升级。

e0dca264d99a33665aa81886822ad9e9.png

使用命令行 npm uninstall -g @angular/cli 将 Node.js 16 文件夹下的 ng 先卸载。

97bc7fe1de88f646376adfdc2851ed3d.png

卸载成功:

c856069e02449a1e1b1ab45efa75cb25.png

Node.js 16 下面已经看不到 ng 这个文件了:

798d2455109c2ce3b711eead9da9415c.png

然后使用命令行进行全局安装:

npm install -g @angular/cli

4762961213a83d77dab1726fa8d11702.png

不加任何参数的话,版本号太高了:15.1.5

d6da55dd31a8ac1461634d06b8c8fe57.png

使用 Angular CLI 14.2.3 可以成功编译 Spartacus 5.0:

3d776d899baa11c696e064cf0f5d0a4a.png

编译成功的截图如下:

a2df7f2786c5a63ea986bf709d4607c5.png

5.0 的 payment details,在 dropdown list 里切换 Payment type,不会有 HTTP 请求产生。

d8d83ca9a6c45a41cffb956615ef2560.png

仅当点击 continue 按钮时才会触发事件。

e82fab5c8e6430972e8a37b9c104c73c.png

Continue 按钮所在的 form Component 的选择器:cx-payment-form

b00d2d57b8183843b0bac6abac7f4e4c.png

55baff88b4353676902a875701f6eee5.png

694554e10be3b213cf9dfb93502b0336.png


点了 submit 后执行什么函数?在 form 的 ngSubmit 事件绑定函数上能够找到答案:next 函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7gxzqpkF-1676028574844)(null)]

我们在 next 函数里设置断点,点击 continue 按钮,断点触发:

83e741ac37bb247e8210386afc927b08.png

发送事件:

ebcaf65e6136103456d83c8db9dbebf9.png

这是一个 command pattern:

377eee040d315933ff53f95d2a5c8a0d.png

request 请求的目的是询问一个 postUrl:

0ad176da52aef46061c3c73c36432fce.png

这个 postUrl 的值,包含在 HTTP post 请求的 response 里:

bf9bbb10bdfd745e135b411a4e7367ca.png

command 执行的 payload 在调试器里能够看到:

b315c4c4c3d89bfeb2d625049e6eeb2d.png

command 执行的 payload 在调试器里能够看到:

26e831e5a70890670fc9f87c293c01bf.png

相关文章
|
25天前
|
Web App开发 缓存 JavaScript
使用TypeScript创建高效HTTP代理请求
使用TypeScript创建高效HTTP代理请求
|
6天前
|
XML 前端开发 JavaScript
JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!
JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!
|
9天前
|
Java API Spring
Spring Boot中使用Feign进行HTTP请求
Spring Boot中使用Feign进行HTTP请求
|
9天前
|
缓存 负载均衡 NoSQL
Redis系列学习文章分享---第十四篇(Redis多级缓存--封装Http请求+向tomcat发送http请求+根据商品id对tomcat集群负载均衡)
Redis系列学习文章分享---第十四篇(Redis多级缓存--封装Http请求+向tomcat发送http请求+根据商品id对tomcat集群负载均衡)
18 1
|
12天前
|
XML 开发框架 前端开发
http请求响应的contentType
http请求响应的contentType
21 5
|
14天前
|
域名解析 存储 缓存
HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口
【6月更文挑战第23天】 HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口;TCP连接(HTTP/1.1可能需排队);三次握手;发送请求头与体;服务器处理并返回响应;TCP连接可能关闭或保持;浏览器接收并显示响应,更新缓存。HTTP版本间有差异。
28 5
|
18天前
|
Java 应用服务中间件 API
Tomcat处理一个HTTP请求的执行流程的详细解析
Tomcat处理一个HTTP请求的执行流程的详细解析
21 4
|
22天前
|
JSON 数据格式 Python
Python 的 requests 库是一个强大的 HTTP 客户端库,用于发送各种类型的 HTTP 请求
【6月更文挑战第15天】Python的requests库简化了HTTP请求。安装后,使用`requests.get()`发送GET请求,检查`status_code`为200表示成功。类似地,`requests.post()`用于POST请求,需提供JSON数据和`Content-Type`头。
38 6
|
24天前
|
Python
python做http请求
python做http请求
16 1
|
29天前
|
JSON API 数据格式
Requests库:轻松实现Python中的HTTP请求
Requests是Python的第三方HTTP库,简化了HTTP请求的发送,支持GET、POST等方法。要安装,使用`pip install requests`。Requests以其简洁API和强大功能成为网络编程首选工具,为开发者提供高效稳定的网络交互体验。
38 5

热门文章

最新文章