Class 构造函数属性值为空

Question

我是第一次尝试使用 indexedDB，想为它创建一个 class。我的代码可以打开数据库并向其中保存一个对象，但是当我尝试检索该对象时，它为 null

var libraries = new storedLibraries();
libraries.openDb();

```
user action
```
libraries.saveLibrary(template);

Class.

class storedLibraries {
    constructor() {
        this.DB_NAME = 'recording-template';
        this.DB_VERSION = 1;
        this.DB_STORE_NAME = 'library';
        this.db = null;
        this.result = null;
        
        if (!('indexedDB' in window)) {
            console.log('This browser doesn\'t support IndexedDB');
            return;
        }
    }
    
    openDb() {
        var request = indexedDB.open(this.DB_NAME, this.DB_VERSION);
        
        var _self = this;
        request.onsuccess = function (evt) {
            _self.db = this.result;
            _self.getObjectStore();
            console.log(_self.result);
            console.log("openDb DONE");
        };
        request.onerror = function (evt) {
            console.error("openDb:", evt.target.errorCode);
        };

        request.onupgradeneeded = function (evt) {
            console.log("openDb.onupgradeneeded");
            var store = evt.currentTarget.result.createObjectStore(_self.DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
        };
    }
    
    saveLibrary(template) {
        var transaction = this.db.transaction(["library"], "readwrite");
        
        // Do something when all the data is added to the database.
        var _self = this;
        transaction.oncomplete = function(event) {
            console.log("All done!");
        };

        transaction.onerror = function(event) {
            // Don't forget to handle errors!
        };

        var objectStore = transaction.objectStore("library");
        var request = objectStore.add(template);
        request.onsuccess = function(event) {
            // event.target.result
        };
    }
    
    getObjectStore() {
        //console.log(this);
        var transaction = this.db.transaction(["library"], "readwrite");
        var objectStore = transaction.objectStore("library");
        var request = objectStore.getAll();
        
        var _self = this;
        request.onerror = function(event) {
            // Handle errors!
        };
        request.onsuccess = function(event) {
            // Do something with the request.result!
            _self.result = request.result;
            console.log(_self.result);
        };
    }
}

getObjectStore() 中的 console.log(_self.result); 输出正确的值，但在 openDb() 中它为空。我尝试了很多不同的东西，但我显然不理解某些东西？

Answer 1

我使用 promises 让它工作。

const libraries = new storedLibraries();
libraries.loadLibraries();

Class.

class storedLibraries {
    constructor() {
        this.DB_NAME = 'recording-template';
        this.DB_VERSION = 1;
        this.DB_STORE_NAME = 'library';
        this.db = null;
        this.libraries = [];

        if (!('indexedDB' in window)) {
            console.log('This browser doesn\'t support IndexedDB');
            return;
        }
    }
    
    loadLibraries() {
        this.openDb().then((result) => {
            this.getObjectStore().then((result) => {
                for(const res of result) {
                    this.libraries.push(new recordingsTemplate(res));
                }
            });
        }).catch(console.error);
    }

    async openDb() {
        var _self = this;
        const prom = new Promise((resolve, reject) => {
            var request = indexedDB.open(_self.DB_NAME, _self.DB_VERSION);
            
            request.onsuccess = (event) => {
                console.log("openDb:");
                _self.db = request.result;
                resolve(request.result);
            }
            request.onerror = (event) => {
                console.error("openDb:", event.target.errorCode);
                reject(evt);
            }
            
            request.onupgradeneeded = (event) => {
                console.log("openDb.onupgradeneeded");
                _self.db = request.result;
                var store = event.currentTarget.result.createObjectStore(_self.DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
                var transaction = event.target.transaction;
                
                transaction.oncomplete = (event) => {
                    resolve(store);
                }
            }
        });
        return prom;
    }
    
    async getObjectStore() {
        var _self = this;
        const prom = new Promise((resolve, reject) => {
            var transaction = _self.db.transaction(["library"], "readwrite");
            var objectStore = transaction.objectStore("library");
            var request = objectStore.getAll();
            
            request.onerror = (event) => {
                // Handle errors!
                reject(event);
            };
            request.onsuccess = (event) => {
                resolve(request.result);
            };
        });
        return prom;
    }
    
    async saveLibrary(template) {
        var _self = this;
        const prom = new Promise((resolve, reject) => {
            var transaction = _self.db.transaction(["library"], "readwrite");
            
            // Do something when all the data is added to the database.
            transaction.oncomplete = function(event) {
                console.log("All done!");
            };

            transaction.onerror = function(event) {
                // Don't forget to handle errors!
            };

            var objectStore = transaction.objectStore("library");
            var request = objectStore.add(template);
            request.onsuccess = function(event) {
                // event.target.result
            };
        });
        return prom;
    }
}

Class 构造函数属性值为空

Class constructor property value is null

javascript

class

indexeddb

Class 构造函数 属性 值为空

Class constructor property value is null

javascript

class

indexeddb

Class 构造函数属性值为空