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

我在我本地的开发环境，执行批处理程序
b2c.bat 可以正常运行 4.3.x 这个版本的 Spartacus，但是 5.0 即 develop 分支就不行，报这个错误：,,使用命令行
where ng，发现 Angular CLI 的可执行文件 ng 的位置，是基于 node v14 这个版本的文件夹下面。
,环境变量如下，PATH 环境变量的值：
,我在上图将 path 环境变量里的 Node.js 配置成 16，但是 Angular CLI 仍然是老的 12 版本，所以需要升级。,,使用命令行
npm uninstall -g @angular/cli 将 Node.js 16 文件夹下的 ng 先卸载。,,卸载成功：
,Node.js 16 下面已经看不到 ng 这个文件了：,,然后使用命令行进行全局安装：,npm install -g @angular/cli,,不加任何参数的话，版本号太高了：15.1.5
,使用 Angular CLI 14.2.3 可以成功编译 Spartacus 5.0：,,编译成功的截图如下：
,5.0 的 payment details，在 dropdown list 里切换
Payment type，不会有 HTTP 请求产生。,,仅当点击 continue 按钮时才会触发事件。,,Continue 按钮所在的 form Component 的选择器：cx-payment-form,,,,点了 submit 后执行什么函数？在 form 的
ngSubmit 事件绑定函数上能够找到答案：next 函数。,[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7gxzqpkF-1676028574844)(null)],我们在 next 函数里设置断点，点击 continue 按钮，断点触发：,,发送事件：
,这是一个 command pattern：,,request 请求的目的是询问一个 postUrl：,,这个 postUrl 的值，包含在 HTTP post 请求的 response 里：,,command 执行的 payload 在调试器里能够看到：,,command pattern 其实并没有神秘之处，本质仍然是在 service 类里调用 connector 类来发送 HTTP 请求：,,,

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

$ 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 这个版本的文件夹下面。

环境变量如下，PATH 环境变量的值：

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

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

卸载成功：

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

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

npm install -g @angular/cli

不加任何参数的话，版本号太高了：15.1.5

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

编译成功的截图如下：

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

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

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

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

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

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

发送事件：

这是一个 command pattern：

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

这个 postUrl 的值，包含在 HTTP post 请求的 response 里：

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

command pattern 其实并没有神秘之处，本质仍然是在 service 类里调用 connector 类来发送 HTTP 请求：