SAP Cloud for Customer裡一個Promise的實際應用場合
There are lots of tutorials about promise in the internet.
Recently I am studying the frontend code of SAP Cloud for Customer and I come across a real example of how promise is used there. Below is the Passcode logon view.
Once Passcode is entered, suppose I have already entered the system url and frontend user name in the past, they will be directly retrieved from browser storage.
Currently I use Chrome to access C4C and Web SQL is used as browser storage, where the system url and logon user name could be found from Chrome development tool.
The corresponding database initialization and table read is done by code below in file AppStatusService.js.
The series of callback functions are chained by promise API “then()” which are expected to be executed sequentially:
(1) _createTable() could only be executed after database initialization is done. (2) _getApplicationStatus could NOT be executed unless the database table which stores Application status is available – this is ensured by _createTable. (3) After application status is read from database table, _createDefaultEntries could be called to render the default value in Passcode logon view.
All above three steps are organized by promise to achieve the asynchronous execution mode. In order for me to understand how the above code works, I write a simplified version for illustration:
<!doctype html><html><head><script>var end;function setupDB(){
return this.createDatabase().then(createTable).then(insertEntry).then(readEntry).then(printResult);}function createTable(){
return new Promise(function(resovle, reject) {
console.log("prepare to create table..." + Date.now());
this._db.transaction(function(query){
query.executeSql('create table if not exists user(id unique, user, passwd)');
});
setTimeout( _createTableOK.bind(this, resovle), 1000);
});}function _createTableOK(resovle){
console.log("table created successfully..." + Date.now());
resovle();}function createDatabase(){
return new Promise(function(resovle, reject) {
console.log("prepare to create database..." + Date.now());
this._db = openDatabase('mydb','1.0', 'JerryTestdb',1024);
setTimeout( _createDatabaseOK.bind(this, resovle), 1000);
});}function _createDatabaseOK(resovle){
console.log("database created successfully..." + Date.now());
resovle(this._db);}function insertEntry(){
return new Promise(function(resolve, reject) {
this._db.transaction(function(query){
query.executeSql("insert into user values (1,'Jerry','1234')");
});
setTimeout( _insertEntryOK.bind(this, resolve), 1000);
});}function _insertEntryOK(resolve){
console.log("entry inserted to table successfully..." + Date.now());
resolve();}function readEntry() {
return new Promise(function(resolve, reject) {
this._db.transaction( function(query) {
query.executeSql('select * from user',[],function(u,results) {
setTimeout( _readEntryOK.bind(this, resolve, results), 1000);
}); // end of query.executeSql } // end of function(query) ); // end of this._db.transaction });}function _readEntryOK(resolve, oResult){
console.log("entry readed from DB successfully..." + Date.now());
resolve(oResult);}function printResult(oResults){
for( var i = 0; i < oResults.rows.length; i++) {
document.writeln('id: ' + oResults.rows[i].id);
document.writeln('user: ' + oResults.rows[i].user);
document.writeln('passwd: ' + oResults.rows[i].passwd);
}
end = true;}function work(){
if( end ){
clearInterval(handle);
}
else{
console.log(" working..." + Date.now());
}}setupDB();var handle = setInterval( work, 200);</script></head></html>
Open the html page with Chrome, and you can find that a database with name mydb and a table user is created with one record inserted.
In order to achieve the simulation that each step of webSQL is a time-consuming operation, I wrap the real logic into setTimeout with a certain time delay.
I scheduled function work to simulate the main work to do and the database related job are done in an asynchronous way organized within function module setupDB() by promise API.
The console output proves that the database operations are really executed asynchronously in exactly the same order as they are scheduled via then API of promise.
Note
Not all browsers support WebSQL and the specification of WebSQL is no longer in active maintenance.
Even in C4C frontend framework code we can see more and more usage on IndexedDB instead:
See the comparison on these two techniques from this link Migrating your WebSQL DB to IndexedDB.
要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2703963/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Java Volatile的一個實際應用場合Java
- 機器學習在SAP Cloud for Customer中的應用機器學習Cloud
- SAP Cloud for Customer框架是如何使用JavaScript Promise的Cloud框架JavaScriptPromise
- 如何使用SAP Cloud for Customer裡的Data SourceCloud
- SAP Cloud for Customer的Container應用設計原理CloudAI
- SAP Cloud for Customer的Mashup位於CustomPane裡Cloud
- SAP Cloud for Customer的Account Team裡的role如何配置Cloud
- SAP Cloud for Customer和SAP Fiori系統裡的OData測試工具Cloud
- SAP Cloud for Customer裡BusinessPartner, Customer和Employee這些BO的區別Cloud
- SAP Cloud for Customer裡Sales Order和Sales Quote的建模方式Cloud
- SAP CRM,Cloud for Customer和Fiori應用的direct navigation比較CloudNavigation
- SAP Cloud for Customer的前世今生Cloud
- SAP Cloud for Customer ABSL的一些優化Cloud優化
- SAP Cloud for Customer Extensibility的設計與實現Cloud
- SAP Cloud for Customer裡新的Lead UI對Mashup整合的支援原理CloudUI
- SAP CRM和Cloud for Customer裡的Formatted Text控制元件的比較CloudORM控制元件
- SAP Cloud for Customer Cloud(C4C)Application Studio裡的程式碼除錯CloudAPP除錯
- 代理IP的三個實際應用場景
- SAP Cloud for Customer Account和individual customer的區別Cloud
- 自開發Web應用和SAP Customer Data Cloud Identity服務的整合WebCloudIDE
- SAP 電商雲 Spartacus UI 裡的 InjectionToken 應用場景UI
- 在 SAP BTP 平臺 Neo 環境裡使用 SAP Cloud SDK 建立應用Cloud
- SAP 電商雲 Spartacus UI 同 SAP Customer Data Cloud 的整合UICloud
- 面向面試題和實際應用談Promise面試題Promise
- 使用SAP Cloud Application Programming模型開發OData的一個實際例子CloudAPP模型
- DATAGUARD實際的應用場景
- 如何建立HTML Mashup並插入到SAP Cloud for Customer標準頁面裡HTMLCloud
- SAP Commerce Cloud 新一代 UI Spartacus 和 Customer Data cloud 的整合CloudUI
- SAP Cloud for Customer的CTI呼叫中心解決方案Cloud
- 使用soapUI消費SAP Cloud for Customer的web serviceUICloudWeb
- SAP Cloud for Customer Work Center(工作中心)的實現原始碼Cloud原始碼
- SAP Customer Data Cloud(Gigya)的使用者搜尋實現Cloud
- Redis實際應用場景Redis
- SAP Cloud for Customer UI Designer裡如何消費Object Value Selector(OVS)CloudUIObject
- 一個實際的例子學習 SAP BTP Java 應用的 @Before 註解使用方式Java
- 如何把SAP Kyma和SAP Cloud for Customer連線起來Cloud
- 一個典型的使用 SAP Cloud Application Programming 模型開發的 Fiori 應用CloudAPP模型
- SAP Cloud for Customer 標準培訓課程Cloud