共计 3395 个字符，预计需要花费 9 分钟才能阅读完成。
这是 Jerry 2021 年的第 63 篇文章，也是汪子熙公众号总共第 340 篇原创文章。
蜀相
杜甫
丞相祠堂何处寻，锦官城外柏森森。映阶碧草自秋色，隔叶黄鹂空好音。三顾频烦天下计，两朝开济老臣心。出师未捷身先死，长使英雄泪满襟。
Jerry 前一篇文章 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行我的项目的增加和删除实现 ，比拟了 SAP UI5 表格控件应用 OData 模型和 JSON 模型的实现差别。
SAP UI5 初学者在学习 OData API 应用时，面临的一个问题是：如何找到一些公网能够收费应用的 OData 服务。
Northwind 无疑是极佳的抉择之一，然而该服务不反对批改操作。
尽管从实践上讲，咱们能够应用依照 Jerry 的这篇文章，SAP Cloud Application Programming 介绍 (2021 更新版），采纳 SAP Cloud Application Programming 模型 (CAP)，自行在本地搭建一个反对增删改查的 OData 服务，然而对于学习 SAP UI5 的初学者来说，未免有些大材小用。
其实 SAP UI5 自带了一个很容易应用的 Mock Server，能够用来在本地模仿 OData 服务提供者，响应 SAP UI5 利用发动的 OData 申请，并应用事后配置好的测试数据进行回复。
登录 SAP UI5 官方网站，输出关键字 Mock Server，即可找到其应用文档：
https://sapui5.hana.ondemand….
Mock Server 的运行对于 SAP UI5 利用来说是齐全通明的，SAP UI5 利用基本不晓得本人收回的申请，到底是被实在的远端服务器响应，还是由 Mock Server 返回。
https://sapui5.hana.ondemand….
上面通过理论例子来介绍 Mock Server 的应用步骤。本例全副代码，在我的 Github 能够取得：
https://github.com/wangzixi-d…
(1) 在 Table 控制器里，新建一个 OData 模型实例，传入 OData 服务 url：
/here/goes/your/serviceUrl/
该 url 就是咱们须要在 Mock Server 里模仿的 OData 服务地址。
(2) 本地工程文件里新建一个 test 文件夹，其内蕴含下列三个文件：
metadata.xml: OData 服务的元数据文件，定义了名为 Products 的 EntitySet，其类型为 Product，后者蕴含三个字段：
ProductId
Name
Size
Products.json
蕴含了上图 metadata.xml 文件里定义的名为 Products 的 EntitySet 对应的数据。运行时，Mock Server 会主动到其工作目录查找同名的 .json 文件，读取其内容，返回给 OData 服务的消费者。
server.js
从 sap/ui/core/util/MockServer 导入 Mock Server 的实现，将步骤一里 SAP UI5 须要生产的 OData 服务 url，传入 Mock Server 的 rootUri 属性即可。
下图 autoRespondAfter 属性，定义了应用 Mock Server 响应 OData 申请的延时，即 1 秒后返回响应。
三个文件总共行数加起来不到 60 行，却提供了一个性能残缺的 Mock Server.
(3) 在该 SAP UI5 利用的 index.html 里，应用 sap.ui.require 加载本地工程里的 Mock Server 实例，调用其 init 办法，即可启动该服务器。
将 Jerry 的代码克隆到本地，npm install 之后执行 node local.js:
https://github.com/wangzixi-d…
即可在 Chrome 开发者工具里察看 Mock Server 的运行状况：
http://localhost:3002/tablede…
(1) SAP UI5 表格控件申请 OData 服务的元数据。Mock Server 接管到该申请，将工作目录下的 metadata.xml 的内容，返回给调用者。
(2) Jerry 之前的文章 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行我的项目的增加和删除实现 已经提到，OData 模型是服务器端模型，这意味着表格控件基本不晓得以后到底有多少条数据须要显示。
因而 SAP UI5 表格控件会发送另一条蕴含 $count 操作的 OData 申请，去查问 Products 总数。
最终在表格控件里显示的条目数，是 $count 操作的后果和 20 两个数字的较小值。20 是 OData 分页的默认尺寸，在 Jerry 的文章 SAP UI 搜寻分页技术 里有具体介绍。
因为我在 Mock Server 的 Products.json 里只保护了两条数据，故 $count 后果为 2.
(3) 当初表格控件曾经明确了本人须要显示两条数据，故发动第三个 OData 数据申请，$skip=0&$top=2, 向服务器申请第一页的前两条数据。
Mock Server 接管到该申请，将 Products.json 里全副两条数据返回给表格控件。
(4) 当应用 Add Row 按钮增加一条新的数据之后，SAP UI5 表格控件顺次发送下列三条 OData 申请：
删除操作的执行逻辑相似，这里不再赘述。
SAP UI5 Mock Server 的一些高级用法，能够通过查问 Mock Server 的帮忙文档来获取。
例如，假如咱们冀望针对 Mock Server 返回给调用者的数据，进行一些自定义解决。此时能够在 Mock Server 提供的 attachAfter 钩子函数里编写自定义逻辑：
如上图所示，当 Products.json 文件的数据被 Mock Server 加载，筹备返回给 OData 消费者之前，利用开发人员编写的 attachAfter 回调函数触发，将每个产品的 Name 字段值开端，加上一个句号。
SAP UI5 Mock Server 实际上基于驰名的开源 Mock 框架 Sinon.js：
https://github.com/sinonjs/sinon
Sinon 框架的命名，是为了向希腊联军与特洛伊人之间长达十年的和平期间涌现出的英雄兵士 Sinon(西农) 致敬，就是下图这位：
为了攻破坚硬的特洛伊城，希腊联军中的奥德修斯想出了“木马计”：在木马腹中隐匿士兵，待特洛伊人将木马拽入城后，等到夜深人静时，木马内的士兵一齐涌出，内外夹攻，拿下特洛伊城。
Sinon 则怯懦地担当了诱使特洛伊人将木马拖进城的艰巨工作。他胜利地表演了一名特务 (Spy) 的角色，凭借杰出的演技使得特洛伊国王深信，木马对特洛伊城来说，是个“吉祥物”。
在基于 Sinon 的 SAP UI5 Mock Server 通过 init 办法启动时，会调用 Sinon.useFakeXMLHttpRequest，将 Sinon 伪造的 FakeXMLHttpRequest 实现，替换 Window 全局的 XMLHttpRequest, 实现了偷天换日。
这个替换，个别的 SAP UI5 开发人员如果不对 Sinon 源代码进行单步调试，就不会知情。这个情景有点像今日希腊联军的士兵们，藏匿在特洛伊木马中，神不知鬼不觉地潜入特洛伊城的场景。
值得一提的是，Sinon 的工作原理，和 Java 以及 Angular 里的 HTTP Intercept(拦截器) 是不同的。在 HTTP 拦截器的工作场景中，HTTP 申请在两个工夫点内，能够被框架或者利用开发人员编写的拦截器解决：
程序代码调用 API 发送 HTTP 申请后，在 HTTP 申请理论从浏览器收回之前，由拦截器进行预处理
应用程序失去远端的服务器响应后，在交给其回调函数解决之前，由拦截器进行预处理
拦截器对 HTTP 申请的预处理，其类型包含但不局限于：全局错误处理，对立的身份验证机制，或者削减额定的业务逻辑等等。
而 Sinon 的工作场景下，因为实在的 XMLHttpRequest 曾经被 FakeXMLHttpRequest 替换了，所以基本就没有实在的 HTTP 申请产生，因而 Chrome 开发者工具 network 标签页内也就基本察看不到任何网络申请。SAP UI5 利用和 Mock Server 之间的交互，纯正是基于 FakeXMLHttpRequest 在内存中的一问一答而已。
心愿本文可能帮忙大家了解 SAP UI5 Mock Server 的应用步骤，工作原理，以及 Mock Server 背地基于的 Sinon 框架的命名由来。
感激浏览。
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
