javascript - IndexedDB 等待事件

Question

我在尝试从对象存储中检索数据时遇到 IndexedDB 问题。

 function GetLayoutData(key) {

indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
var open = indexedDB.open("DB", 1);

 open.onsuccess = function () {
    db = open.result;
    tx = db.transaction("Store", "readwrite");
    var store = tx.objectStore("Store");

    store.get(key).onsuccess =  function (event) {
        console.log(event.target.result);
        return event.target.result;
    }
}

基本上我有一个函数，我想返回检索到的值，这样我就可以用它来设置和输入元素，问题是函数不等待事件并且什么都不返回，因为它没有任何数据然而。功能看起来像这样我如何告诉它在返回之前等待“onsuccess”完成？

非常感谢任何帮助。

Answer 1

2023 年更新

因为这仍然受到关注:如果你真的需要 indexeddb，你可以使用像 dexie.js 这样的库. “我为什么要为这样的事情使用一个库？”:简化的 API，直接使用 promise ，支持运算符(过滤/排序数据)，管理连接等。

MDN 有一个 great explanation关于 indexeddb 的工作原理和一些不错的库。

原始答案

Promise 的可能解决方案；

function getLayoutData (key) {
    return new Promise (function(resolve) {
        indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
        var open = indexedDB.open("DB", 1);

        open.onsuccess = function () {
            db = open.result;
            tx = db.transaction("Store", "readwrite");
            var store = tx.objectStore("Store");

            store.get(key).onsuccess = function (event) {
                return resolve(event.target.result);
            }
        }
    });
}

然后像这样实现它:

const result = await getLayoutData();
// Do whatever you want with the data

通常您需要一个 ( promise polyfill ) 来使其与尚不支持 promises 的浏览器一起工作(例如 IE)。由于 IE 无论如何都不支持 indexedDB，因此您不必在这种情况下使用它。