一個朋友向我咨詢，關于 SAP Fiori 頁面自動刷新的實現方法。

如果是 Jerry 之前視頻 一步步創建 SAP Fiori Elements 應用 介紹的 SAP Fiori Elements Overview 應用，要實現頁面自動刷新比較容易，直接在 manifest.json 里使用屬性 refreshIntervalInMinutes 定義刷新時間間隔即可。

但這位朋友咨詢的 SAP Fiori 頁面，顯然是指采取 SAP UI5 Freestyle 方式開發的頁面。所謂 Freestyle 開發方式，是指不借助 SAP Fiori Elements 框架，而是使用 SAP UI5 SDK，由應用開發人員自行編寫應用的視圖和控制器邏輯。

要實現頁面刷新，一種容易想到的思路就是，讓 SAP UI5 應用的 Controller 層，周期性地向后臺發起數據請求。一旦最新的數據響應從后臺返回到瀏覽器，根據 SAP UI5 MVC 設計，模型數據 (Model) 的更新則會導致視圖 (View) 的自動更新。

本文采取上述思路實現 SAP Fiori 頁面自動刷新功能。當然如果大家有更好的實現方式，歡迎留言指教。

本文介紹的例子應用的所有代碼，在我的 Github 上能夠找到。

將 Jerry 上述代碼倉庫的應用克隆到本地。該應用里我使用的 OData 服務為著名的用于教學的 Northwind 服務，其 url 為：

https://services.odata.org/Northwind/Northwind.svc

將這個 url 配置成應用 manifest.json 文件的 dataSources/mainService 區域內對應的 uri 字段值。這樣，運行時該 SAP UI5 應用消費的 OData 服務就確定下來了，無需我們手動編寫代碼實例化 OData Model.

在 manifest.json 文件 sap.ui5 區域里，維護字段 rootView 的值，以確定該應用的根視圖名稱為：

sap.ui.jerry.odatatable.Table

在這個根視圖里，我只定義了一個 sap.m.Table 控件，并且在控制器里編寫了幾行 JavaScript 代碼，實現該表格控件的周期性動態刷新。

表格控件的抬頭用于顯示當前頁面刷新次數的計數器。例如下圖表示，當前表格已經刷新了 7 次。

Table 控件的 items 屬性綁定到 OData 服務里名為 Products 的 entitySet，用于顯示該 OData 服務提供的產品數據。

本地執行 node local.js 命令后，訪問如下 url 以打開這個 SAP UI5 應用的頁面：

http://localhost:3002/odatatable/

能看到該 OData 服務返回的總共 77 個產品數據，顯示在表格控件里：

同時，在 Chrome 開發者工具里觀察到總共 4 個 batch 請求。這是因為 Northwind OData 服務總共包含 77 個產品，而單次的 batch 請求，由于服務器的分頁實現，一次只返回 20 條數據，故總共需要 77 / 20 + 1 = 4 次 batch 請求。

關于 SAP 應用服務器端的分頁實現，可以參考 Jerry 之前的文章：

• SAP UI 搜索分頁技術

• SAP OData編程指南

• SAP UI的加載動畫效果和幽靈設計(Ghost Design)

如果在本地測試時，消費 Northwind OData 服務遇到跨域問題，可以按照 Jerry 之前的文章?用JavaScript訪問SAP云平臺上的服務遇到跨域問題該怎么辦，自己開發一個簡單的代理服務器 來避免這個問題。

如果實在覺得麻煩，使用如下的命令行啟動 Chrome，暫時禁掉其安全檢查(不推薦)：

–user-data-dir=“C:/temp” --disable-web-security

最后，在控制器里想辦法實現周期性定時操作。很多朋友建議使用瀏覽器環境下原生的 setInterval 或者 setTimeout 等 API:

其實 SAP UI5 提供了基于 setTimeout 封裝的 API，sap.ui.core.IntervalTrigger，使用方式如下圖所示：

上圖第 11 行代碼里，傳入 IntervalTrigger 構造函數的數字，即是定時器觸發的時間間隔，單位為毫秒。第 12 行 addListener 方法，注冊一個事件處理函數。每當定時器時間間隔到達時，觸發該函數的執行。

上圖第 17 行代碼，拿到 Binding 實例后，調用其 refresh 方法，會觸發向后臺的 OData 請求，重新加載數據，從而達到刷新表格顯示數據的目的:

https://sapui5.hana.ondemand.com/#/topic/6c47b2b39db9404582994070ec3d57a2#loio66a130fa4d10411b8fc90df00185554b

關于上圖 SAP 幫助文檔介紹的 refresh 方法，其實還有一個知識點。如果我們把 IntervalTrigger 構造函數里傳入的時間間隔調小，比如指定成每隔 0.1 秒觸發一次，這樣在 Chrome 開發者工具 network 標簽頁里能看到大量狀態為 cancelled 的 OData 請求：

Jerry 之前的文章?SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎?曾經分析過，在什么樣的情況下，OData 請求會被 cancel. 大家如果有所遺忘，可以再回過頭去閱讀。

在控制器的 onExit 鉤子函數里，可以調用 removeListener 方法，移除事件處理函數，以避免可能的內存泄漏。

大家如果有更好的實現方式，歡迎留言指教。

更多閱讀

• 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

• 答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

• 本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 服務器上

• 深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field

• 深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用添加自定義按鈕

• SAP Fiori Elements 框架里 Smart Table 控件的工作原理介紹

• SAP Fiori Elements List Report Smart Table 列項目寬度計算的奧妙

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Fiori 页面的周期性动态刷新功能的实现步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。