javascript - 无法读取未定义 IndexedDB 的属性 'result'

Question

我正在尝试从 IndexedDB 数据库获取点赞数。但是，我收到此错误

Uncaught TypeError: Cannot read property 'result' of undefined at IDBRequest.request.onsuccess

它正在抛出错误

console.log(request.result)

parent.addEventListener('click', event => 
{
    //Get number of likes
    var transaction = db.transaction(['posts']);
    var objectStore = transaction.objectStore('posts');
    var request = objectStore.get(parseInt(event.target.id));

    request.onerror = function(event) 
    {
        console.log('Transaction failed');
    };

    request.onsuccess = function(event) 
   {
       console.log(request.result)
       if (request.result)
       {
            var nlikes = request.result.likes;
            console.log(request.result.text);
            nlikes + 1;

            //Increase the like of the post 
            var request = db.transaction(['posts'], 'readwrite')
                .objectStore('posts')
                .put({ id: parseInt(event.target.id),  likes: nlikes});

            request.onsuccess = function (event) 
            {
               console.log('The data has been updated successfully');
            };

            request.onerror = function (event) 
            {
                console.log('The data has been updated failed');

            //Add user like user to log
            }
       }     
   }
});

Answer 1

调试此错误时，熟悉它会有所帮助。此错误是一个基本的、常见的 JavaScript 错误，不仅仅适用于 indexedDB。当您尝试访问未初始化对象的属性时，会出现错误Uncaught TypeError:无法读取未定义的属性“结果”。本例中未初始化的对象是变量 request，属性是 result。因此，理解此错误就是理解为什么当您尝试访问其属性之一时 request 未定义。

如果我自己没有在浏览器中使用此代码，我并不完全确定为什么请求未定义。不过，我的初步猜测也许会对您有所帮助。

稍后在函数的 var request = db.transaction... 行中再次声明相同的变量。这可能是该变量在函数早期未定义的原因。我会尝试解释原因。

当您使用 var 关键字声明变量时，它并不总是出现在您声明它的位置。当 JavaScript 解释器评估您的代码时，它会对其进行一系列更改。发生的转换之一称为提升。使用 var 声明的变量被提升到函数的开头，和/或在某些情况下甚至更早且位于函数范围之外。所以，这是违反直觉的，但是解释器实际看到你的代码的方式看起来更像是这样的:

request.onsuccess = function(event) {
  var request = undefined;
  console.log(request.result);
  if(request.result) {
     ...;
     request = db.transaction...;
     ...;
  }
};

正如您在代码的这个变体中所看到的，在计算 console.log 表达式时，请求显然未定义。

如何修复这个错误？有几种方法。

首先，考虑使用let/const 代替var。 let/const 的范围受到限制。将范围想象成 {} block 的层次结构。如果您稍后将 request 声明为 let request = ...，则可以避免提升问题，因为 request 不会被提升到其封闭的 {} block 作用域之外，因此永远不会跳转按评估顺序向上到祖先功能 block 范围的开始。

其次，考虑使用不同的变量。不要再次执行 var request = db.transaction...;，而是执行 var request2 = db.transaction...;。现在，提升仍然发生，但这次变量 request2 被提升到函数的顶部，这与 request 不存在标识符冲突。现在，请求将在您调用 console.log 时定义。

第三，考虑使用一个indexedDB事务。您可以使用单个事务发出多个请求。从您的代码来看，这一点并不明显，但看起来您没有充分的理由使用单独的事务。我能想到的唯一原因可能是对indexedDB不熟悉。因此，了解如何对一个事务发出多个请求将有所帮助。另外，如果这是一个问题，使用单个读写事务可能会比使用一次读取然后一次写入更快，如果这可能是您进行多个交易的原因。

当您在一个 txn 上使用多个请求时，现在您可能会对 txn 何时完成感兴趣，而不是对单个请求何时完成感兴趣，因此，您甚至不再需要声明第二个请求对象，因此，不再会遇到吊装问题。

它看起来像这样:

var txn = db.transaction(..., 'readwrite');
txn.oncomplete = function(event) {
  console.debug('txn completed');
};
txn.onerror = function(event) {
  console.debug('txn failed', event.target.error);
};

var store = txn.objectStore(...);
var request = store.get(...);
request.onsuccess = function(event) {
  //...;
  store.put(...);
  //...;
};

如果不是很明显，这里我只是重用 store，它是 IDBObjectStore 的一个实例，它仍然与我稍后调用 store.put 时创建它的事务相关联>.

这三种不同方法中的任何一种都可能解决您的问题。