Обработка данных, полученных с помощью indexedDB - PullRequest
Новая
       8

Обработка данных, полученных с помощью indexedDB

0 голосов
/ 04 декабря 2018

Я новичок в 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 голосов
/ 04 декабря 2018

Это единственный способ, который я нашел, чтобы решить проблему, хотя кажется, что это грязный код, я думаю, что его можно улучшить. 

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