window.onload 在索引数据库语句之前开始

Question

大家下午好，

我的问题是 javascript 相关的，我制作了一个名为 checkflights 的函数，一系列用于打开 indexeddb 数据库的语句和一个 window.onload 触发 checkflights 的语句。

似乎 window.onload 在打开数据库语句之前触发，因此 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 && window.navigator.onLine){
                sendFlights()
                notify("Flights sent to server")
                }
        }
    }

Answer 1

您正在通过再次使用 var 从外部范围重新声明 db。在本地范围内使用 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 && window.navigator.onLine){
                sendFlights()
                notify("Flights sent to server")
                }
        }
    }

正如@Kinglish 在上面的评论中所建议的，您可能需要等待请求得到处理。 IndexedDB 没有 return 承诺，但您可以自己在顶部编写一个 async/await 包装器，或者考虑使用像 https://github.com/jakearchibald/idb 这样的库来 Promisify indexedDB。

window.onload 在索引数据库语句之前开始

window.onload starts before indexed db statements

javascript

indexeddb

onload