zoukankan      html  css  js  c++  java
  • SAP Cloud for Customer框架是如何使用JavaScript 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的原创文章,请关注公众号"汪子熙":

  • 相关阅读:
    通过hmc启动lpar的终端
    修复LVM手记
    通过VMLibrary在client partition上安装AIX全程实录
    【转】通过VIOS实现AIX系统的网络虚拟化
    rhel 6 启动流程分析(/etc/inittab)
    Linux中tty、pty、pts的概念区别
    Shell中while循环的done 后接一个重定向<
    搭建dns服务器时报错error: bind: address already in use
    关于 smit mktcpip 和smit chinet 的区别
    博客园博客停更(本博客收集本人于2018年之前的博客,2018年之后的博客统一发布在CSDN上)
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13592226.html
Copyright © 2011-2022 走看看