SAP UI5 应用的 OData 元数据请求的发送原理分析

简介: SAP UI5 应用的 OData 元数据请求的发送原理分析

当我们的 SAP UI5 应用里使用了 OData 模型从远端服务器读取数据,具体实现细节可以参考我这篇文章:SAP UI5 初学者教程之二十四 - 如何使用 OData 数据模型,可以在 Chrome 开发者工具里,观察到一个由 SAP UI5 框架自动发出的元数据请求。

1.png请求的 url :


https://services.odata.org/V2/Northwind/Northwind.svc/$metadata?sap-language=EN


该请求没有 content-type 字段,只有一个 accept 字段,值为:application/xml

image.png

还有一个 MaxDataServiceVersion,值为 3.0

响应的头部字段里,没有 Accept 字段,只有 Content-Type 字段,注意大小写:

image.png

具体发起该 HTTP 请求的代码位置:ODataMetadata 的 _loadMetadata 方法:

2.png

3.png

在构造函数里触发 _loadMetadata:

4.png

基于 url 创建 request 对象:

5.png

根据如下的 API 获得 HTTP 请求支持的语言:Accept-Language

sap.ui.getCore().getConfiguration().getLanguageTag()

计算出来是:en-US

6.png

bAsync 标志位为 true,代表这是个异步请求:

7.png

withCredentials 标志位为 false:

8.png

然后使用传统的 promise API 发起请求:

9.png

如果 metadata 加载成功,就在其回调里执行初始化逻辑:

if (!this.oMetadata.isLoaded()) {
        this.oMetadata.attachFailed(this.onMetadataFailed);
      }

image.png

下面调用 OData API,传入刚才构造好的请求对象,进行请求发送:

10.png

进入 datajs.js, 首先 prepareRequest:

11.png

12.png

normalizeHeaders:对头部字段进行规范化处理,其实就是将头部字段转换成小写:

13.png

然后调用 invokeRequest 进行发送:

image.png

移交给 httpClient:

14.png

datajs.js 的底层还是基于 XHR 即 XmlHttpRequest:

15.png

直接使用浏览器原生的 XMLHttpRequest:

image.png

这里的 fallback 机制用的是已经很古老的 ActiveXObject 了,现代浏览器都不会执行到:

var createXmlHttpRequest = function () {
        /// <summary>Creates a XmlHttpRequest object.</summary>
        /// <returns type="XmlHttpRequest">XmlHttpRequest object.</returns>
        if (window.XMLHttpRequest) {
            return new window.XMLHttpRequest();
        }
        var exception;
        if (window.ActiveXObject) {
            try {
                return new window.ActiveXObject("Msxml2.XMLHTTP.6.0");
            } catch (_) {
                try {
                    return new window.ActiveXObject("Msxml2.XMLHTTP.3.0");
                } catch (e) {
                    exception = e;
                }
            }
        } else {
            exception = { message: "XMLHttpRequest not supported" };
        }
        throw exception;
    };

最后调用 xhr.open:

16.png使用 send api 进行请求发送。

17.png


目录
相关文章
|
5月前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
5月前
|
算法 数据可视化 程序员
【Qt UI】调色板QPalette类在Qt编程中的应用
【Qt UI】调色板QPalette类在Qt编程中的应用
133 0
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
28天前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
32 1
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
36 0
|
2月前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
29 0
|
2月前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
38 0
|
5月前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
126 0
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
下一篇
无影云桌面