操作使用 indexedDB 获得的数据答案

【问题标题】：Manipulating data obtained with indexedDB操作使用 indexedDB 获得的数据
【发布时间】：2018-12-04 00:19:10
【问题描述】：

我是 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() 的所有代码，一旦获得数据，我就在objectStoreRequest 的方法.onsuccess 中工作，因此我不必使用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)
        }
    })
};

无论如何，似乎没有人有另一种方法来解决这个问题，所以我去用这个回复来回复自己这个帖子。

【问题讨论】：

在使用 JavaScript 的 Promise 功能时，您只需要考虑使用 await 和 async 限定符。您的代码示例表明您不是，所以我会从您的问题中删除对此的讨论。

标签： javascript async-await indexeddb

【解决方案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)
        }
    })
};

【讨论】：