操作使用 indexedDB 获得的数据

Question

我是 IndexedDB 的新手，我无法操作从 indexedDB 获得的数据 table.I 只需要在按下按钮时搜索值，然后用按钮激活的事件开始工作，它必须return 很多结果，可能需要几秒钟才能得到 return 值，所以我需要在回调函数中使用 async / await。我认为问题是同步的，因为我使回调函数 async 和获取数据的函数 getData() 带有单词 await ，即使如此，我也无法使用数据，因为当我执行 console.log(x) 时，它 return 是 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() 的所有代码，一旦获得数据，我就在 objectStoreRequest 的方法 .onsuccess 中工作，因此我避免了必须使用async / await，我还在继续处理尚未完成的交易。如果有人知道使它工作的更简洁的方法或向我解释为什么原始 post 代码不起作用，我将不胜感激。我附上我目前正在使用的代码：

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)
        }
    })
};

无论如何，似乎没有人有另一种方法来解决这个问题，所以我要用这个回应来回应这个post。

Answer 1

这是我找到的解决问题的唯一方法，虽然它看起来像一个脏代码，但我认为它可以改进。

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)
        }
    })
};

操作使用 indexedDB 获得的数据

Manipulating data obtained with indexedDB

javascript

async-await

indexeddb