渐进式web应用开发---promise式数据库(五)

在前面的一篇文章中，我们已经实现了使用indexedDB实现ajax本地数据存储的功能，详情，请看这篇文章。现在我们需要把上面的一篇文章中的代码使用promise结构来重构下。我们为什么需要使用promise来重构呢？我们之前一直使用 indexedDB中的代码，但是在indexedDB中，我们代码很大程度上依赖于回调，如果我们的代码越来越多，我们需要的回调嵌套就越来越多，这对于后期代码维护不是很好。

比如我们可以看看我们之前的代码如下所示：

// 打开或创建 store-data 数据库
var result = window.indexedDB.open('store-data', 3);

// 监听error函数触发
result.onerror = function(event) {
console.log("DataBase error:", event.target.error);
}
// 监听当前版本号被升级的时候触发该函数
result.onupgradeneeded = function(event) {
var db = event.target.result;
/*
是否包含该对象仓库名(或叫表名)。如果不包含就创建一个。
该对象中的 keyPath属性id为主键
*/
if (!db.objectStoreNames.contains('store')) {
db.createObjectStore("store", { keyPath: "id", autoIncrement: true });
}
}

result.onsuccess = function(event) {
var targetValue = event.target.result;
/*
1. 使用 targetValue.transaction(storeName, transactionMode) 来创建事务
2. 创建事务之后，我们使用 targetValue.transaction(storeName, transactionMode).objectStore(storeName)
这个方法，拿到 IDBObjectStore对象。
*/
var objectStore = targetValue.transaction(storeName, transactionMode).objectStore(storeName);
var request = objectStore.add({id: 3, name: 'kongzhi12', age: 31});
request.onsuccess = function(event) {
console.log('回调函数成功');
}
request.onerror = function(event) {
console.log("DataBase error:", event.target.error);
}
}

如上代码，我们打开了或创建了一个 store-data 数据库，然后把onsuccess回调附加到该请求上，在该onsuccess请求上，我们又有请求事件，接着有 onsuccess 回调函数，依次类推，如果以后代码越来越复杂的时候，我们以后代码就一直变成回调嵌套中，因此我们现在想使用promise方法来重构上面的代码，我们想要让上面的代码变成如下所示这样的：

openDatabase('store-data', 3).then(function(db) {
return openObjectStore(db, "store", "readwrite");
}).then(function(objectStore){
return addObject(objectStore, {"id": 3, "name": 'kongzhi123', 'age': 31});
}).then(function(){
console.log('回调成功');
}).catch(function(error) {
console.log('DataBase error', error);
});

我们希望变成如上的promise代码，我们希望将javascript异步回调的代码变成我们的promise代码。在重构我们的代码之前，我们先来看看我们的 XMLHttpRequest 代码，我们希望使用promise来重构该代码，在重构之前，我们先来看看XMLHttpRequest代码如下：

var xhr = new XMLHttpRequest();
xhr.onload = function() {
// 处理响应
};
xhr.onerror = function() {
// 处理错误
};
xhr.open("get", '/xxx.json', true);
xhr.send();

如上这样的代码，是我们之前的xmlHttpRequest代码，现在我们可以使用我们的promise来重构我们上面的代码，因此重构后的代码变成如下所示：

var promise_XHR = function(url, method) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onload = resolve;
xhr.onerror = reject;
xhr.open(method, url, true);
xhr.send();
});
};

如上 promise_XHR 函数，该函数接收一个url 和 method参数，并返回了一个promise对象，该promise传入了一个函数，该函数有两个参数，代表成功和失败的回调，然后内部代码，我们创建了一个XMLHttpRequest对象，然后该对象 onload 函数的时候 把resolve 成功回调赋值给他，然后 xhr.onerror 函数的时候，把 reject 拒绝函数传递给他，我们调用方式如下所示：

promise_XHR('/xxx.json', 'get').then(function(){
// 处理成功的回调函数
}).catch(error) {
// 处理我们异常的回调函数
}

现在我们想把该方式使用到我们的 store.js 代码内部来。重构后的代码就变成了如下：

import axios from 'axios';

var DB_VERSION = 1;
var DB_NAME = 'store-data2';

var openDataBase = function() {
return new Promise(function(resolve, reject) {
if (!window.indexedDB) {
reject("indexedDB not supported");
}
// 打开或创建 store-data 数据库
var result = window.indexedDB.open(DB_NAME, DB_VERSION);

// 监听error函数触发
result.onerror = function(event) {
console.log("DataBase error:", event.target.error);
}
// 监听当前版本号被升级的时候触发该函数
result.onupgradeneeded = function(event) {
var db = event.target.result;
/*
是否包含该对象仓库名(或叫表名)。如果不包含就创建一个。
该对象中的 keyPath属性id为主键
*/
if (!db.objectStoreNames.contains('store')) {
db.createObjectStore("store", { keyPath: "id", autoIncrement: true });
}
}
result.onsuccess = function(event) {
resolve(event.target.result);
}
});
};
/*
@param {storeName} 仓库名或表名
@param {transactionMode} 事务模式 readOnly 只读，readwrite 可读可写
*/
var openObjectStore = function(db, storeName, transactionMode) {
return db.transaction(storeName, transactionMode).objectStore(storeName);
};

var getStore = function (successCallback) {

return new Promise(function(resolve, reject) {
openDataBase().then(function(db) {
var objectStore = openObjectStore(db, 'store');
var datas = [];
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
datas.push(cursor.value);
cursor.continue();
} else {
if (datas.length > 0) {
resolve(datas);
} else {
getDataFromServer().then(function(d) {
openDataBase().then(function(db) {
var objectStore = openObjectStore(db, "store", "readwrite");
for (let i = 0; i < datas.length; i++) {
objectStore.add(datas[i]);
}
resolve(datas);
});
});
}
}
}
}).catch(function() {
getDataFromServer().then(function(datas) {
resolve(datas);
});
});
});
};

function getDataFromServer() {
return new Promise(function(resolve, reject) {
axios.get("http://localhost:8081/public/json/index.json", resolve);
});
}

var addToObjectStore = function(storeName, object) {
return new Promise(function(resolve, reject) {
openDataBase().then(function(db) {
openObjectStore(db, storeName, 'readwrite').add(object).onsuccess = resolve;
}).catch(function(error) {
reject(error);
})
});
};

var updateInObjectStore = function(storeName, id, object) {
return new Promise(function(resolve, reject) {
openDataBase().then(function(db) {
openObjectStore(db, storeName, "readwrite").openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (!cursor) {
reject("store-data not found");
}
if (cursor.value.id === id) {
cursor.put(object).onsuccess = resolve;
return;
}
cursor.continue();
}
}).catch(function(){
reject(error);
})
});
}

window.openDataBase = openDataBase;
window.openObjectStore = openObjectStore;

window.addToObjectStore = addToObjectStore;
window.updateInObjectStore = updateInObjectStore;

window.getStore = getStore;

然后我们需要在我们的 myAccount.js 代码改成如下初始化所示：

import $ from 'jquery';

$(function() {
openDataBase("store-data2", 2).then(function(db) {
return openObjectStore(db, "store", "readwrite");
}).then(function(objectStore) {
return addToObjectStore("store", {id: 1, name: 'kongzhi111', age: 11});
}).then(function() {
console.log('添加成功');
}).catch(function(error) {
console.log("数据库加载失败", error);
});
/*
var addStore = function(id, name, age) {
var obj = {
id: id,
name: name,
age: age
};
addToObjectStore("store", obj);
renderHTMLFunc(obj);
$.getJSON("http://localhost:8081/public/json/index.json", obj, function(data) {
updateDisplay(data);
});
};
$("#submit").click(function(e) {
addStore(3, 'longen1', '111');
});
$("#update").click(function(e) {
$.getJSON("http://localhost:8081/public/json/index.json", {id: 1}, function(data) {
updateInObjectStore("store", 1, data);
updateDisplay(data);
});
});
*/
});

然后会向我们的数据库中插入一条数据，我们刷新页面后查看我们的本地数据库如下所示：

github源码demo查看