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的原创文章,请关注公众号"汪子熙":
相关推荐
SAP Cloud for Customer OData API开发人员指南《 SAP Cloud for Customer OData API开发人员指南》以最方便开发人员的格式补充了《 的用法细节和SAP Cloud for Customer OData API示例。 此外,它还涵盖了SAP Cloud...
SAP Cloud for Customer服务器端集成将SAP Cloud for Customer的功能日期Google邮箱。 使用适用于Gmail的SAP Cloud for Customer扩展,您可以利用每天使用的工具在Gmail中提高工作效率。 此扩展程序连接到SAP Cloud ...
The SAP Cloud for Customer OData API Developer’s Guide com
该项目为小部件提供了一个示例实现,以将信息推送到C4C应用程序。 该演示模拟了来电或去电,以通过产品的Live Activity Center模块验证SAP Service / Sales Cloud上的集成。 注意:没有用于通过此小部件拨打实际...
SAP Cloud for Customer方案
SAP Cloud for Analytics for Planning SAP BPC:SAC 新技术,新理念
Gmail:trade_mark:和SAP解决方案之间的集成与SAP Cloud for Customer,用于Google Chrome的Gmail加载项,您可以利用您每天使用的工具更加富有成效。此扩展将Gmail连接到SAP Cloud for Customer解决方案,并在电子...
SAP GUI for windows 800安装包,内含SAP GUI for windows 800 Patch5 补丁SAP GUI for windows 800安装包,内含SAP GUI for windows 800 Patch5 补丁SAP GUI for windows 800安装包,内含SAP GUI for windows 800 ...
The Connectivity service allows SAP Cloud Platform applications to securely access remote services that run on the Internet or on-premise.
最全的官方文档,入门必备,最全的官方文档,入门必备,
SAP CLOUD APPLICATION STUDIO 2311 SAP C4C SAP CLOUD APPLICATION STUDIO SAP C4C
该扩展将Gmail与SAP Hybris Cloud for Customer解决方案连接起来,在向潜在客户和客户发送电子邮件时提供所有销售信息的快速浏览,并允许您链接电子邮件对话,搜索重复联系人,创建新的潜在客户,任务和访问,全部...
SAP Analytics Cloud Content
SAP1711接口 。
SAP Cloud for Service方案
AP Security, Privacy, and Compliance in the Cloud and the service SAP can offer
SAP Cloud for Customer(Android 版)
This project contains sample applications for SAP Cloud Ap
SAP S/4 HANA Cloud Integration white paper. state the landscape of the integration and options.