处理通过indexedDB

时间:2018-12-04 00:19:11

标签: javascript async-await indexeddb

我是IndexedDB的新手,我无法处理从indexedDB表获取的数据。我只需要在按下按钮时执行搜索值,然后通过按钮激活的事件才开始起作用,并且它必须返回许多结果,返回值可能需要几秒钟,因此我需要在回调函数中使用async / await。我认为问题是同步的,因为我使回调函数async和获取数据的函数getData()带有单词await,即使如此,我也无法使用数据,因为当我执行console.log(x)时,它将返回undefined值。

let db;
let request = window.indexedDB.open("Cities", 1);

request.onerror = function (event) {
    console.log("error")
};

request.onsuccess = function (event) {
    db = event.target.result;
    document.getElementById('search').addEventListener('click', async function () {
       let x = await getData();
       console.log(x)
    })
};

function getData() {

    let transaction = db.transaction(["City"], "readwrite");

    transaction.oncomplete = function (event) {
        document.querySelector('body').innerHTML += '<li>Transaction completed.</li>';
    };

    transaction.onerror = function () {
        document.querySelector('body').innerHTML += '<li>Transaction not opened due to error: ' + transaction.error + '</li>';
    };

    let objectStore = transaction.objectStore("City");

    let objectStoreRequest = objectStore.getAll();

    objectStoreRequest.onsuccess = function () {
        document.querySelector('body').innerHTML += '<li>Request successful.</li>';
        let myRecord;
        return myRecord = objectStoreRequest.result;

    };

当然,console.log(x)仅用于检查所获取的数据是否正确,一旦该点成为搜索的一部分,那又是另一回事了。 我不确定我的问题是async / await还是因为我没有正确获取IndexedDB数据。有帮助吗?

编辑:-尽管我认为这不是解决问题的最佳方法,但我想我已经找到了解决方案。我已经在调用事件的函数中移动了函数getData()的所有代码,一旦获得数据,我就在.onsuccess的方法objectStoreRequest中工作,因此避免了使用async / await,我还将继续处理尚未完成的交易。如果有人知道一种更清洁的方法使它起作用或向我解释为什么原始邮政编码不起作用,我将不胜感激。 我附上我目前正在使用的代码:

let db;
let request = window.indexedDB.open("Cities", 1);

request.onerror = function (event) {
    console.log("error")
};
request.onsuccess = function (event) {

    db = event.target.result;
    document.getElementById('search').addEventListener('click',function () {

        let transaction = db.transaction(["City"], "readwrite");

        transaction.oncomplete = function () {
            document.querySelector('body').innerHTML += '<li>Transaction completed.</li>';
        };

        transaction.onerror = function (event) {
            document.querySelector('body').innerHTML += '<li>Transaction not opened due to error: ' + transaction.error + '</li>';
        };

        let objectStore = transaction.objectStore("City");

        let objectStoreRequest = objectStore.getAll();

        objectStoreRequest.onsuccess = function () {
            document.querySelector('body').innerHTML += '<li>Request successful.</li>';
            let myRecord;
            myRecord = objectStoreRequest.result;
            console.log(myRecord)
        }
    })
};

无论如何,似乎没有其他人可以解决此问题,所以我要用此回复来回复我自己。

1 个答案:

答案 0 :(得分:0)

这是我找到的解决问题的唯一方法,尽管它看起来像是肮脏的代码,但我认为它可以改进。

<= Recv data, 1191 bytes (0x4a7)
0000: ={};})();(function(){function c(b){window.setTimeout(function(){
0040: var a=document.createElement("script");a.src=b;google.timers&&go
0080: ogle.timers.load.t&&google.tick&&google.tick("load",{gen204:"xjs