IndexedDB: TransactionInactiveError

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

您的成功回调正在异步执行。将事务初始化代码移动到回调中应该可以解决以下问题：

success: function (response) {
    var customers = response.d;
    var tx = db.transaction('tblFields', 'readwrite');
    var store = tx.objectStore('tblFields');
    $(customers).each(function () {
        var obj = { measureID: this.measureID, measureName: this.measureName, fieldName: this.fieldName };
        var request = store.add(obj);
    });
},

Answer 2

如果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);
      }
    };
  }
});

如果您想使用承诺并访问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);
  }
}