javascript - TransactionInactiveError 与后续的 put 调用

Question

我不知道我是否做错了什么，或者我是否只是把事情逼得太紧。

我正在尝试将大约 70000 条记录从我的在线数据库同步到 IndexedDB与 EventSource 结合和一个Worker 。

因此，我为每个包获取 2000 条记录，然后使用以下代码将它们存储在 IndexedDB 中:

eventSource.addEventListener('package', function(e) {
    var data = JSON.parse(e.data);

    putData(data.type, data.records);
});

function putData(storeName, data) {
    var store = db.transaction([storeName], 'readwrite').objectStore(storeName);

    return new Promise(function(resolve, reject) {
        putRecord(data, store, 0);

        store.transaction.oncomplete = resolve;
        store.transaction.onerror = reject;
    });
}

function putRecord(data, store, recordIndex) {
    if(recordIndex < data.length){
        var req = store.put(data[recordIndex]);

        req.onsuccess = function(e) {
            recordIndex += 1;
            putRecord(data, store, recordIndex);
        };
        req.onerror = function() {
            self.postMessage(this.error.name);
            recordIndex += 1;
            putRecord(data, store, recordIndex);
        };
    }
} 

这一切都适用于大约 10000 条记录。但没有真正测试极限在哪里。我怀疑在某些时候并行的事务太多，导致单个事务非常慢，从而因超时而造成麻烦。根据开发工具，70000 条记录大约为 20MB。

完全错误:

Uncaught TransactionInactiveError: Failed to execute 'put' on 'IDBObjectStore': The transaction has finished.

有什么想法吗？

Answer 1

我在您的代码中没有看到明显的错误，但您可以使其变得更简单、更快。无需等待前一个 put() 成功即可发出第二个 put() 请求。

function putData(storeName, data) {   
    var store = db.transaction([storeName], 'readwrite').objectStore(storeName);

    return new Promise(function(resolve, reject) {
        for (var i = 0; i < data.length; ++i) {
            var req = store.put(data[i]);
            req.onerror = function(e) {
                self.postMessage(e.target.error.name);
            };            
        }

        store.transaction.oncomplete = resolve;
        store.transaction.onerror = reject;
    });
}

您看到的错误可能是因为浏览器对事务实现了任意时间限制。但同样，您的代码看起来是正确的，包括 Promises 的使用(这对于 IDB 来说很棘手，但据我所知您做得正确!)

如果这种情况仍然发生，我会附议评论，通过独立的重现来针对浏览器提交错误。 (如果 Chrome 中发生这种情况，我很乐意查看。)