如何将IndexedDB异步读取代码修改为同步执行？

要实现你期望的执行顺序，核心是利用Promise封装IndexedDB的异步操作，再通过async/await控制代码执行流程。IndexedDB本身是异步API，无法强制转为真正的同步执行，但可以通过异步流程控制达到你想要的输出顺序。

修改后的代码 #

subtractBtn.addEventListener("click", async (e) => {
    console.log("executing");
    await readDatafromDB();
    console.log("executing after read");
});

function readDatafromDB() {
    return new Promise((resolve, reject) => {
        const db_store = createTransaction("readwrite");
        const dataRequest = db_store.get(79);

        console.log("executing 2");
        
        dataRequest.onsuccess = function(e) {       
            const data = e.target.result;
            console.log("data is: ", data);
            console.log("executing 4"); // 移到异步回调内，保证在数据读取完成后执行
            resolve(data);
        };

        dataRequest.onerror = function(e) {
            console.error("读取数据库失败", e);
            reject(e);
        };
    });
}

执行顺序说明 #

修改后控制台输出会严格按照你期望的顺序：

1. executing：事件触发后同步打印
2. executing 2：进入readDatafromDB后同步打印
3. data is: [你的数据]：IndexedDB读取完成后，在onsuccess回调中打印
4. executing 4：数据读取成功后立即打印（移到回调内确保顺序）
5. executing after read：await等待readDatafromDB的Promise完成后打印

原代码顺序异常的原因 #

原来的代码中，data.onsuccess是异步回调，会在主线程空闲时才执行，而console.log("executing 4")和console.log("executing after read")是同步代码，会优先执行，所以才会出现你看到的顺序。通过Promise封装后，我们把需要等待异步操作的代码放到了回调或await之后，从而保证了执行顺序。

内容的提问来源于stack exchange，提问作者Mukesh Keerthipati