IndexedDB：事务非活动错误

Question

在这一行：

 var request = store.add(obj); 

我收到错误：

TransactionInactiveError：针对当前不活动或已完成的事务发出了请求。

我只在使用 AJAX 时收到错误。如何确保 AJAX 在事务完成之前完成？我正在尝试将信息从 sql 数据库加载到对象存储中。当我用谷歌搜索错误时，我得到了有关事务和异步性质的信息，但我还没有找到带有代码的具体解决方案。

我研究了回调、承诺和超时（这对我来说就像黑客），但我无法让这个异步调用工作。任何帮助将不胜感激。

var req = indexedDB.open(DB_NAME, DB_VERSION);
req.onsuccess = function () {
        db = this.result;
        var tx = db.transaction('tblFields', 'readwrite');
        var store = tx.objectStore('tblFields');

             $.ajax({
                    type: "POST",
                    url: "Off.aspx/GetFields",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var customers = response.d;
                        $(customers).each(function () {
                            var obj = { measureID: this.measureID, measureName: this.measureName, fieldName: this.fieldName };
                            var request = store.add(obj);
                        });
                    },
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
}

Answer 1

如果 indexedDB 检测到事务上没有活动请求，它将在短时间内关闭。当您发出 ajax 请求时，不会立即得到响应。在发出 ajax 请求和获得响应之间，idb 发现没有使用该事务的活动 idb 请求，因此它关闭该事务。

解决方案很简单。先做ajax请求，再做idb事务。这是一些伪代码：

$.ajax({
  success: function(response) {
    var req = indexedDB.open(...);
    req.onsuccess = function(event) {
      var db = event.target.result; // or this.result, or req.result
      var tx = db.transaction(...);
      var store = tx.objectStore(...);
      for(var customer of response.d) {
        var obj = {...};
        store.add(obj);
      }
    };
  }
});

如果你想使用 Promise 并访问 ES6，请执行以下操作：

function dbconnect(name, version, upgrade) {
  return new Promise(function(resolve, reject) {
    var request = indexedDB.open(name, version);
    request.onupgradeneeded = upgrade;
    request.onsuccess = function(event) {
      var db = event.target.result;
      resolve(db);
    };
    request.onerror = function(event) {
      var error = event.target.error;
      reject(error);
    };
    request.onblocked = function(event) {
      console.warn('blocked, not fulfilling promise until unblocked');
    };
  });
}

function ajaxpostrequest(url) {
  return new Promise(function(resolve, reject) {
    $.ajax({
      type: 'post',
      data: '{}',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      url: url,
      success: resolve,
      failure: reject,
      error: reject
    });
  });
}

function addcustomer(db, customer) {
  return new Promise(function(resolve, reject) {
    var tx = db.transaction(...);
    var store = tx.objectStore(...);
    var obj = {measureId: customer.measureId, ...};
    var request = store.add(obj);
    request.onsuccess = function(event) {
      resolve();
    };
    request.onerror = function(event) {
      reject(event.target.error);
    };
  });
}


async function request_then_connect_then_put() {
  try {
    var response = await fetch(url, {method:'post'});
    console.log('fetched url');
    var json = await response.json();
    var customers = json.d;
    console.log('read json object from text of url');
    var db = await dbconnect(...);
    console.log('connected to database', db.name);
    var addpromises = customers.map((customer) => addcustomer(db, customer));
    var result = await Promise.all(addpromises); 
    console.log('stored all customer object things');
  } catch(error) {
    console.debug(error);
  }
}