资讯专栏INFORMATION COLUMN

indexedDB事务功能的Promise化封装

zombieda / 2086人阅读

摘要:综上,对进行一定的封装,来简化编码操作。化的尝试对于这种带大量回调的,使用进行异步化封装是个好主意。因此包括在内的所有异步方法都会强制中止当前事务。这就决定了一个事务内部的所有操作必须是同步完成的。目前只实现了和,其他的有待下一步工作。

前言

本文是介绍我在编写indexedDB封装库中诞生的一个副产品——如何让indexedDB在支持链式调用的同时,保持对事务的支持。
项目地址:https://github.com/woodensail/indexedDB

2015/11/12 注:这篇文章的思路有问题,大家看看了解一下就行,不要这么干。更好的做法已经写在了下一篇中。大家可以去看一下,顺便帮忙点个推荐或者收藏一个。
地址:http://segmentfault.com/a/1190000003984871

indexedDB的基本用法

</>复制代码

  1. var tx = db.transaction("info", "readonly");
  2. var store = tx.objectStore("info");
  3. store.get("id").onsuccess = function (e) {
  4. console.log(e.target.result);
  5. };

上面这段代码中,开启了一个事务,并从名为info的store中取得了key为id的记录,并打印在控制台。
其中打印的部分写在了onsuccess回调中,如果我们希望把取出的id加1然后返回就需要这样:

</>复制代码

  1. // 方案1
  2. var tx = db.transaction("info", "readwrite");
  3. var store = tx.objectStore("info");
  4. store.get("id").onsuccess = function (e) {
  5. store.put({key:"id",value:e.target.result.value + 1}).onsuccess = function (e) {
  6. ……
  7. };
  8. };
  9. // 方案2
  10. var tx = db.transaction("info", "readwrite");
  11. var store = tx.objectStore("info");
  12. var step2 = function(e){
  13. store.put({key:"id",value:e.target.result.value + 1}).onsuccess = function (e) {
  14. ……
  15. };
  16. }
  17. store.get("id").onsuccess = step2;

前者用到了嵌套回调,后者则需要将业务流程拆散。
综上,对indexedDB进行一定的封装,来简化编码操作。

Promise化的尝试

对于这种带大量回调的API,使用Promise进行异步化封装是个好主意。
我们可以做如下封装:

</>复制代码

  1. function put(db, table, data ,tx) {
  2. return new Promise(function (resolve) {
  3. var store = tx.objectStore(table);
  4. store.put(data).onsuccess = function (e) {
  5. resolve(e);
  6. };
  7. });
  8. }
  9. var tx = db.transaction("info", "readwrite");
  10. Promise.resolve().then(function(){
  11. put(db, "info", {……}, tx)
  12. }).then(function(){
  13. put(db, "info", {……}, tx)
  14. });

看上去这么做是没有问题的,但是实质上,在存储第二条数据时,会报错并提示事务已被停止。

事务与Promise的冲突

</>复制代码

  1. When control is returned to the event loop, the implementation MUST set the active flag to false.

——摘自W3C推荐标准(W3C Recommendation 08 January 2015)

如同上面的引用所说,目前的W3C标准要求在控制权回到事件循环时,当前开启的事务必须被设置为关闭。因此包括Promise.then在内的所有异步方法都会强制中止当前事务。这就决定了一个事务内部的所有操作必须是同步完成的。
也真是基于这个原因,我没有在github上找到实现链式调用的indexedDB封装库。
其中寸志前辈的BarnJS中到是有链式调用,然而只是实现了Event.get().then()。也就是只能一次数据库操作,一次结果处理,然后就结束。并不能串联多个数据库操作在同一个事务内。

不够要实现链式调用其实也不难,关键的问题就在于Promise本身是为异步操作而生的,因此会在链式调用的各个函数中返回事件循环,从而减少网页的卡顿。所以我们就需要实现一个在执行每个函数过程之间不会返回事件循环的Promise,也就是一个同步化的Promise。

也许是这个要求太过奇葩,我没发现网上有提供同步化执行的promise库。所以只能自己实现一个简单的。虽然功能不全,但也能凑活用了。下面是使用样例和详细代码解释,完整代码见github。

使用样例

</>复制代码

  1. // 这句是我封装过后的用法,等效于:
  2. // var tx = new Transaction(db, "info", "readwrite");
  3. var tx = dbObj.transaction("info", "readwrite");
  4. //正常写法
  5. tx.then(function () {
  6. tx.get("info", "a");
  7. tx.get("info", "b");
  8. }).then(function (a, b) {
  9. tx.put("info", {key : "c", value : Math.max(a.v, b.v));
  10. })
  11. //偷懒写法
  12. tx.then(function () {
  13. tx.getKV("info", "a");
  14. tx.getKV("info", "b");
  15. }).then(function (a, b) {
  16. tx.putKV("info", "c", Math.max(a, b));
  17. })
代码解释

</>复制代码

  1. var Transaction = function (db, table, type) {
  2. this.transaction = db.transaction(table, type);
  3. this.requests = [];
  4. this.nexts = [];
  5. this.errorFuns = [];
  6. };
  7. Transaction.prototype.then = function (fun) {
  8. var _this = this;
  9. // 若errored为真则视为已经出错,直接返回。此时后面的then语句都被放弃。
  10. if (this.errored) {
  11. return this;
  12. }
  13. // 如果当前队列为空则将自身入队后,立刻执行,否则只入队,不执行。
  14. if (!_this.nexts.length) {
  15. _this.nexts.push(fun);
  16. fun(_this.results);
  17. _this.goNext();
  18. } else {
  19. _this.nexts.push(fun);
  20. }
  21. // 返回this以实现链式调用
  22. return _this;
  23. };

Transaction的初始化语句和供使用者调用的then语句。

</>复制代码

  1. Transaction.prototype.put = function (table, data) {
  2. var store = this.transaction.objectStore(table);
  3. this.requests.push([store.put(data)]);
  4. };
  5. Transaction.prototype.get = function (table, key) {
  6. var store = this.transaction.objectStore(table);
  7. this.requests.push([store.get(key)]);
  8. };
  9. Transaction.prototype.putKV = function (table, k, v) {
  10. var store = this.transaction.objectStore(table);
  11. this.requests.push([store.put({k, v})]);
  12. };
  13. Transaction.prototype.getKV = function (table, key) {
  14. var store = this.transaction.objectStore(table);
  15. this.requests.push([store.get(key), item=>(item || {}).v]);
  16. };

所有的函数都在发起数据库操作后将返回的request对象暂存入this.requests中。
目前只实现了put和get,其他的有待下一步工作。另外,getKV和setKV是专门用于存取key-value数据的,要求被存取的store包含k,v两个字段,其中k为主键。

</>复制代码

  1. // 该语句会在链式调用中的每个函数被执行后立刻调用,用于处理结果,并调用队列中的下一个函数。
  2. Transaction.prototype.goNext = function () {
  3. var _this = this;
  4. // 统计前一个函数块中执行的数据库操作数量
  5. var total = _this.requests.length;
  6. // 清空已完成数据库操作计数器
  7. _this.counter = 0;
  8. // 定义全部操作执行完毕或出差后的回调函数
  9. var success = function () {
  10. // 当已经有错误出现时,放弃下一步执行
  11. if (_this.errored) {
  12. return;
  13. }
  14. // 将队首的节点删除,也就是刚刚执行完毕的节点
  15. _this.nexts.shift();
  16. _this.requests = [];
  17. // 从返回的event集合中提取出所有result,如果有parser则使用parser。
  18. _this.results = _this.events.map(function (e, index) {
  19. if (_this.parser[index]) {
  20. return _this.parser[index](e.target.result);
  21. } else {
  22. return e.target.result;
  23. }
  24. });
  25. //判断队列是否已经执行完毕,否则继续执行下一个节点
  26. if (_this.nexts.length) {
  27. // 将节点的执行结果作为参数传给下一个节点,使用了spread操作符。
  28. _this.nexts[0](..._this.results);
  29. _this.goNext();
  30. }
  31. };
  32. // 初始化events数组,清空parser存储器
  33. _this.events = new Array(total);
  34. _this.parser = {};
  35. // 若该请求内不包含数据库操作,则视为已完成,直接调用success
  36. if (total === 0) {
  37. success();
  38. }
  39. // 对于每个请求将请求附带的parser放入存储区。然后绑定onsuccess和onerror。
  40. // 其中onsuccess会在每个请求成功后将计数器加一,当计数器等于total时执行回调
  41. _this.requests.forEach(function (request, index) {
  42. _this.parser[index] = request[1];
  43. request[0].onsuccess = _this.onsuccess(total, index, success);
  44. request[0].onerror = _this.onerror;
  45. })
  46. };

</>复制代码

  1. Transaction.prototype.onsuccess = function (total, index, callback) {
  2. var _this = this;
  3. return function (e) {
  4. // 将返回的event存入event集合中的对应位置
  5. _this.events[index] = e;
  6. _this.counter++;
  7. if (_this.counter === total) {
  8. callback();
  9. }
  10. }
  11. };
  12. Transaction.prototype.onerror = function (e) {
  13. // 设置错误标准
  14. this.errored = true;
  15. // 保存报错的event
  16. this.errorEvent = e;
  17. // 一次调用所有已缓存的catch函数
  18. this.errorFuns.forEach(fun=>fun(e));
  19. };
  20. Transaction.prototype.cache = function (fun) {
  21. // 如果已设置错误标准则用缓存的event为参数立刻调用fun,否则将其存入队列中
  22. if (this.errored) {
  23. fun(this.errorEvent);
  24. } else {
  25. this.errorFuns.push(fun);
  26. }
  27. };

核心的goNext语句以及success与error的回调。catch类似then用于捕捉异常。

总结

好累啊,就这样吧,以后再加其他功能吧。另外这里面用了不少es6的写法。所以请务必使用最新版的edge或chrome或firefox运行。或者你可以手动把es6的写法都去掉。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86187.html

相关文章

  • indexedDB事务功能Promise封装(二)——利用generator完成同步改造

    摘要:在不可以用的前提下,无论是同步化或者链式操作都用不了。于是昨天我自己实现了一个简单的同步执行的,并以此为基础实现了链式操作。 前言 本来这个系列应该不会这么快更新,然而昨晚写完前一篇后才发现我的思路中有一个巨大的漏洞。导致我在前一篇中花费大量时间实现了一个复杂的Transaction类——其实完全有更简单的方式来完成这一切。前篇:http://segmentfault.com/a/11...

    JackJiang 评论0 收藏0
  • html5 indexeddb简明api

    摘要:网上搜来一堆,,几乎没有找到满意的答案,经过汇总并结合自己的理解,封装了一套简单的是一个异步对象,必须使用回调函数方式进行调用打开一个数据库,支持两个参数,第二个参数指定版本号,我没用到,让浏览器自己创建版本号。 网上搜来一堆api,demo,几乎没有找到满意的答案,经过汇总并结合自己的理解,封装了一套简单的api // indexedDB是一个异步对象,必须使用回调函数方式进行调用 ...

    luckyw 评论0 收藏0
  • IndexedDB 简单封装

    摘要:之前我在开发过程中使用的是,可以直接写查询数据。,用键值模式存储数据,而且就是专门为小数量数据设计的。只能是字符串而且空间有限。下面是自己看了阮一峰的文章简单的学习了下对这个浏览器数据库有个大概的了解,下面是个人对简单的封装。IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂...

    Songlcy 评论0 收藏0
  • 【译】渐进式 Web App 离线存储

    摘要:离线存储数据的建议对寻址资源,使用这是的一部分。在到达储量限制之前,两种存储机制都会一直进行存储。则没有对存储量做出限制,只是在之后会弹出提醒。是异步的基于回调函数,但它同样不支持。也是异步的基于回调函数,在和中可以工作虽然使用的是同步。 拖拖拉拉好久,终于把个人博客整出来了。鸣谢 @pinggod。 厚着脸安利一下,地址是 http://www.wemlion.com/。欢迎访问,欢...

    Joyven 评论0 收藏0
  • 【译】渐进式 Web App 离线存储

    摘要:离线存储数据的建议对寻址资源,使用这是的一部分。在到达储量限制之前,两种存储机制都会一直进行存储。则没有对存储量做出限制,只是在之后会弹出提醒。是异步的基于回调函数,但它同样不支持。也是异步的基于回调函数,在和中可以工作虽然使用的是同步。 拖拖拉拉好久,终于把个人博客整出来了。鸣谢 @pinggod。 厚着脸安利一下,地址是 http://www.wemlion.com/。欢迎访问,欢...

    Charlie_Jade 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<