window.onload начинается перед индексированными инструкциями бд

#javascript #indexeddb #onload

Вопрос:

Добрый день всем,

Моя проблема связана с javascript, я сделал одну функцию под названием контрольные полеты, серию инструкций для открытия базы данных indexeddb и одно окно.onload, которое запускает контрольные полеты.

Похоже, что window.onload запускается перед операторами open database, и поэтому функция checkflights не работает должным образом, так как база данных считается пустой.

Есть какое-нибудь решение? код здесь, ниже. Заранее благодарю вас за вашу поддержку.

     var db = null
    const request = indexedDB.open('MyDataBase', '1')

    //on upgrade needed
    request.onupgradeneeded = e => {
        var db = e.target.result
        /* note = {
            title: "note1",
            text: "this is a note"
        }*/
        const myFlights = db.createObjectStore("my_flight", {
            keyPath: "flightid"
        })
        
    }
    
    request.onsuccess = e => {
        var db = e.target.result 
    
    }

    request.onerror = e => {
        alert(`error: ${e.target.error} was found `)
    }    

window.onload = function () {
        checkFlights()

    }

function checkFlights() {
        const tx = db.transaction("my_flight", "readonly");
        // var objectStore = transaction.objectStore('my_flight');
        const mesVols=tx.objectStore("my_flight")

        var countRequest = mesVols.count();
        countRequest.onsuccess = function() {
            console.log(countRequest.result);
            if(countRequest.result>0 amp;amp; window.navigator.onLine){
                sendFlights()
                notify("Flights sent to server")
                }
        }
    }

1. window.onload просто ожидает рендеринга dom и загрузки любых внешних сценариев — он не учитывает выполнение асинхронных сценариев

2. Спасибо, Кинглиш, есть какие-нибудь идеи о том, как я могу этого достичь?

Ответ №1:

Вы повторно db объявляете об этом из внешней области, используя var снова. При использовании var в локальной области вы не влияете на переменную из внешней области и фактически создаете новую локальную db переменную.

  var db = null
    const request = indexedDB.open('MyDataBase', '1');
    //on upgrade needed
    request.onupgradeneeded = e => {
         db = e.target.result
        /* note = {
            title: "note1",
            text: "this is a note"
        }*/
        const myFlights = db.createObjectStore("my_flight", {
            keyPath: "flightid"
        })
        
    }
    
    request.onsuccess = e => {
         db = e.target.result 
    
    }

    request.onerror = e => {
        alert(`error: ${e.target.error} was found `)
    }    

window.onload = function () {
        checkFlights()

    }

function checkFlights() {
        const tx = db.transaction("my_flight", "readonly");
        // var objectStore = transaction.objectStore('my_flight');
        const mesVols=tx.objectStore("my_flight")

        var countRequest = mesVols.count();
        countRequest.onsuccess = function() {
            console.log(countRequest.result);
            if(countRequest.result>0 amp;amp; window.navigator.onLine){
                sendFlights()
                notify("Flights sent to server")
                }
        }
    }

Как предложил @Kinglish в комментарии выше, вам, возможно, придется подождать, пока запрос будет обработан. IndexedDB не возвращает обещание, но вы можете самостоятельно написать оболочку async/await вокруг верхней части или рассмотреть возможность использования библиотеки, такой как https://github.com/jakearchibald/idb это обещает индексированную базу данных.