當我們的 SAP UI5 應用裡使用了 OData 模型從遠端伺服器讀取資料，具體實現細節可以參考我這篇文章：[SAP UI5 初學者教程之二十四 - 如何使用 OData 資料模型](https://jerry.blog.csdn.net/article/details/122750501)，可以在 Chrome 開發者工具裡，觀察到一個由 SAP UI5 框架自動發出的後設資料請求。

![](https://img-blog.csdnimg.cn/img_convert/9d2abdc3ef1f51bf73ca0e4b27b14f56.png)

請求的 url ：

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

該請求沒有 content-type 欄位，只有一個 accept 欄位，值為：application/xml

![](https://img-blog.csdnimg.cn/img_convert/b7adbc2c13e265558a43fcd7f8b31b9e.png)

還有一個 MaxDataServiceVersion，值為 3.0

響應的頭部欄位裡，沒有 Accept 欄位，只有 Content-Type 欄位，注意大小寫：

![](https://img-blog.csdnimg.cn/img_convert/7e0f4a79f6ab43468ea39a24530bdb60.png)

具體發起該 HTTP 請求的程式碼位置：ODataMetadata 的 _loadMetadata 方法：

![](https://img-blog.csdnimg.cn/img_convert/ec8fded676ddf5fb7befae316e5fa4f9.png)

![](https://img-blog.csdnimg.cn/img_convert/2a3239c0ab19bb80002982530702d2d0.png)

在建構函式里觸發 _loadMetadata:

![](https://img-blog.csdnimg.cn/img_convert/1a711f1588d97097370453ccf8c3e365.png)

基於 url 建立 request 物件：

![](https://img-blog.csdnimg.cn/img_convert/0738ade7ab0d9a9eb94b78c6949926c0.png)

根據如下的 API 獲得 HTTP 請求支援的語言：`Accept-Language`

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

計算出來是：en-US

![](https://img-blog.csdnimg.cn/img_convert/d490f0181d9e2e83c1ab724d9aaf9c24.png)

bAsync 標誌位為 true，代表這是個非同步請求：

![](https://img-blog.csdnimg.cn/img_convert/b07e7b76cf9a3cff6fbdcbeafc0012df.png)

withCredentials 標誌位為 false：
![](https://img-blog.csdnimg.cn/img_convert/6c5dbc5b02e182746c90a3a2c22db3fc.png)

然後使用傳統的 promise API 發起請求：
![](https://img-blog.csdnimg.cn/img_convert/554545a87cc7b055d123c6de841481e5.png)

如果 metadata 載入成功，就在其回撥裡執行初始化邏輯：

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

![](https://img-blog.csdnimg.cn/img_convert/a32219d8d2aed94797482c031dbf29ac.png)

下面呼叫 OData API，傳入剛才構造好的請求物件，進行請求傳送：

![](https://img-blog.csdnimg.cn/img_convert/9e41db799144fce5b70ec3e8dc815db8.png)

進入 datajs.js, 首先 prepareRequest:

![](https://img-blog.csdnimg.cn/img_convert/8a80c953c625037bf5471d209176c19c.png)

![](https://img-blog.csdnimg.cn/img_convert/2258933fc0660dd03542401a1e74a1f2.png)

normalizeHeaders：對頭部欄位進行規範化處理，其實就是將頭部欄位轉換成小寫：
![](https://img-blog.csdnimg.cn/img_convert/cf17084f23e5abc685a6f7f88d3692c0.png)

然後呼叫 invokeRequest 進行傳送：
![](https://img-blog.csdnimg.cn/img_convert/5ab29e46444126e500814f3dfae370e9.png)

移交給 httpClient:

![](https://img-blog.csdnimg.cn/img_convert/d5884d9a03435a613ca029d022bd697b.png)

datajs.js 的底層還是基於 XHR 即 XmlHttpRequest：
![](https://img-blog.csdnimg.cn/img_convert/76a9d65c7c2994011c747ddbcc062676.png)

直接使用瀏覽器原生的 XMLHttpRequest：

![](https://img-blog.csdnimg.cn/img_convert/f5f36bd718eef31bf9c06e9a4c5b6edd.png)

這裡的 fallback 機制用的是已經很古老的 ActiveXObject 了，現代瀏覽器都不會執行到：

```javascript
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:

![](https://img-blog.csdnimg.cn/img_convert/81fae8e589faca09a1269ba613eac9e1.png)

使用 send api 進行請求傳送。

![](https://img-blog.csdnimg.cn/img_convert/3c7e2a562413281864ee975e08ff0d7c.png)

SAP UI5 應用的 OData 後設資料請求的傳送原理分析

相關文章