爲什麼在連接到indexedDB時onsuccess需要onsuccess有時會被調用？

Question

我遇到了索引數據庫的問題。在Firefox 18上，當我創建新數據庫時，onsuccess方法被調用的同時有onupgradeneeded。在Chrome 24（這是我想要得到的行爲），該onsuccess方法僅稱爲onupgradeneeded方法完成之後。

根據IndexedDB上的MDN信息，我的印象是，當onsuccess方法被調用時，使用數據庫是安全的，但這使得它看起來像不在Firefox中。

(function(){ 
    app = {}; 

    // These will hold the data for each store. 
    app.objectstores = [ 
    { name: 'UNIVERSITIES', 
     keyPath: 'UID', 
     autoIncrement: false, 
     data_source: 'http://mysites.dev/nddery.ca_www/larelance/data/universite.json' }, 
    ]; 

    // Some information pertaining to the DB. 
    app.indexedDB = {}; 
    app.indexedDB.db = null 
    app.DB_NAME  = 'testdb'; 
    app.DB_VERSION = 1; 

    /** 
    * Attempt to open the database. 
    * If the version has changed, deleted known object stores and re-create them. 
    * We'll add the data later. 
    * 
    */ 
    app.indexedDB.open = function() { 
    // Everything is done through requests and transactions. 
    var request = window.indexedDB.open(app.DB_NAME, app.DB_VERSION); 

    // We can only create Object stores in a onupgradeneeded transaction. 
    request.onupgradeneeded = function(e) { 
     app.indexedDB.db = e.target.result; 
     var db = app.indexedDB.db; 

     // Delete all object stores not to create confusion and re-create them. 
     app.objectstores.forEach(function(o) { 
     if (db.objectStoreNames.contains(o.name)) 
      db.deleteObjectStore(o.name); 

     var store = db.createObjectStore(
      o.name, 
      { keyPath: o.keyPath, autoIncrement: o.autoIncrement } 
     ); 

     app.indexedDB.addDataFromUrl(o.name, o.data_source); 
     }); 
    }; // end request.onupgradeneeded() 

    // This method is called before the "onupgradeneeded" has finished..?? 
    request.onsuccess = function(e) { 
     app.indexedDB.db = e.target.result; 
     app.ui.updateStatusBar('Database initialized...'); 

     // *** 
     // Would like to query the database here but in Firefox the data has not 
     // always been added at this point... Works in Chrome. 
     // 
    }; // end request.onsuccess() 

    request.onerror = app.indexedDB.onerror; 
    }; // end app.indexedDB.open() 


    app.indexedDB.addDataFromUrl = function(store, url) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true); 
    xhr.onload = function(event) { 
     if(xhr.status == 200) { 
     console.log('*** XHR successful'); 
     // I would be adding the JSON data to the database object stores here. 
     } 
     else{ 
     console.error("addDataFromUrl error:", xhr.responseText, xhr.status); 
     } 
    }; 
    xhr.send(); 
    }; // end app.indexedDB.addDataFromUrl() 
})(); 

謝謝！

Answer 1

一個你可能患同的東西是在IndexedDB的自動提交功能。如果交易在短時間內變爲非活動狀態，它將提交交易並關閉交易。

在你的情況你調用一個異步方法來填充數據，這就是爲什麼該交易可能變爲無效。如果你在app.indexedDB.addDataFromUrl（o.name，o.data_source）後添加一個console.write，你會發現它會在你的數據被檢索之前被調用，導致事務的提交。這就是爲什麼當成功回調被調用時數據不存在。 Chrome中事務的超時時間可能高於Firefox。規範中沒有對它進行描述，因此供應商可能會有所不同。

順便說一句，如果你想在你的Ajax調用添加數據，你將不得不通過對象存儲作爲一個參數爲好。

Answer 2

你有內部if(xhr.status == 200) {} 調用事務做什麼從那裏，把數據的對象存儲和更多你所需要的

編輯：

我不喜歡這樣，對我的作品，該功能的onComplete一次所有的數據被插入被調用和對象存儲準備就緒：

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://...", true); 
xhr.addEventListener("load", function(){ 
    if(xhr.status === 200){ 
     console.info("Data received with success"); 
     var data = JSON.parse(xhr.responseText); 
     var transaction = db.transaction([STORe],'readwrite'); 
     var objstore = transaction.objectStore(STORE); 
     for(i = 0; i < data.length; i++){ 
      objstore.put(data[i]); 
     }; 
     transaction.oncomplete = function(event){ 
      //do what you need here 
      console.info("Inserted data: " + data.length); 
     }; 
     transaction.onerror = function(event){    
     }; 
     transaction.onabort = function(event){ 
     }; 
     transaction.ontimeout = function(event){ 
     }; 
     transaction.onblocked = function(event){ 
     };      
    }; 
}, false); 
xhr.send();