如何在 AJAX 响应中将数据插入IndexedDB?

svujldwt  于 2022-12-20  发布在  IndexedDB
关注(0)|答案(1)|浏览(219)

假设我有以下代码在 AJAX 调用之外创建数据库:

// This works on all devices/browsers, and uses IndexedDBShim as a final fallback 
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

// Open (or create) the database
var open = indexedDB.open("MyDatabase", 1);

// Create the schema
open.onupgradeneeded = function() {
    var db = open.result;
    var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});
    var index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};

然后我想在 AJAX 调用中将一些数据存储到这个数据库中,如下所示:

$.ajax({
        url: "https://sometise.com,
        headers: {
            "Authorization": "TOKEN"
        },
        type: "GET",
        success: function (data) {

$(data).each(function (index, el) {

var myArray = {
            ID: el.id,
            Content: data
          }
///ADDING THE ABOVE ARRAY TO THE DATABASE LIKE SO HERE

open.onsuccess = function() {
    // Start a new transaction
    var db = open.result;
    var tx = db.transaction("MyObjectStore", "readwrite");
    var store = tx.objectStore("MyObjectStore");
    var index = store.index("NameIndex");

    // Add some data
    store.put({id: el.id, name: {first: myArray, last: "Doe"}});
    

    // Close the db when the transaction is done
    tx.oncomplete = function() {
        db.close();
    };
}

});

}

  });

但是上面的代码什么也没做!
任何指示都是可取的。

qlfbtfca

qlfbtfca1#

open.onsuccess事件只被触发一次。这应该在DB准备就绪时发生,而这很可能发生在 AJAX 调用从服务器接收到响应之前。因此,该事件在连接侦听器之前被触发,这意味着它永远不会被处理。
你必须把onsuccess的结果存储在 AJAX 回调函数之外,或者你可以在ajax回调函数中使用一个承诺版本的IDB,比如https://github.com/jakearchibald/idbawait
编辑:一个使用promises,await和我上面提到的idb库的例子:

const db = openDB(…);

async function doPost() {
  const response = fetch('https://somesite.com')
  
  const tx = (await db).transaction("MyObjectStore", "readwrite");
  const store = tx.objectStore("MyObjectStore");
  const index = store.index("NameIndex");

  // Add some data
  await store.put(await response);
  await tx.done;
}

应该这样工作,但我会建议阅读有关承诺的一般。也考虑使用现代语言的功能,如const/let和fetch,他们通常使生活容易得多。

相关问题