索引数据库等待事件

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

基本上我有一个函数，我想返回检索到的值，以便我可以使用它来设置和输入元素，问题是该函数不等待事件，只是不返回任何内容，因为它还没有任何数据。函数如下所示我怎么能告诉它等待"成功"完成再返回？

任何帮助将不胜感激。

Answer 1

2023 年更新

由于这仍然受到关注：如果你真的需要indexeddb，你可能可以使用像dexie.js这样的库。 "为什么我使用库来做这样的事情？"：简化的API，直接使用promises，支持运算符(过滤/排序数据(，管理连接等。

MDN对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(才能使其与尚不支持promise的浏览器(例如IE(一起使用。由于IE无论如何都不支持indexedDB，因此在这种情况下您不必使用它。