Typescript异步:如何仅在执行完所有代码后才能返回数据

Question

我很难只在代码执行后返回数据。下面的代码从indexedDB中检索数据并将其返回到组件。我知道这可以通过可观察或承诺来实现，但我正在努力实现。目前，返回在上述代码完成之前运行

retrieveData() {
let dbReq = indexedDB.open('myChatDb', 1);
let db;
let objectStore;
let results;
let transaction;
let data = new Array();
dbReq.onsuccess = function (event) {
db = (event.target as IDBOpenDBRequest).result;
transaction = db.transaction(["customer-messages"]);
objectStore = transaction.objectStore('customer-messages');
results = objectStore.openCursor();
results.onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
data.push(cursor.value);
cursor.continue();
} else {
console.log(data);
console.log(data.length + " array length line 36");
}
}
return data;
}

Answer 1

您可以承诺封装事件处理程序，然后封装await，即：

function openDb(dbName) {
return new Promise((resolve, reject) => {
let dbReq = indexedDB.open(dbName, 1);
dbReq.onsuccess = () => resolve(dbReq.result);
dbReq.onerror = (event) => reject(new Error('Failed to open DB'));
});
}
function queryObjectStore(objectStore) {
return new Promise((resolve, reject) => {
let results = objectStore.openCursor();
let data = [];
results.onerror => () => reject(new Error('Encountered error querying object store.'));
results.onsuccess = () => {
let cursor = event.target.result;
if (cursor) {
data.push(cursor.value);
cursor.continue();
} else {
resolve(data);
}
};
});
}        

async retrieveData() {
const db = await openDd('myChatDb');
const transaction = db.transaction(["customer-messages"]);
const objectStore = transaction.objectStore('customer-messages');

return await queryObjectStore(objectStore);
}

Answer 2

这可以使用异步等待来实现您只需要将retrieveData作为一个异步函数，然后您需要在从数据库检索数据的地方添加wait关键字

async retrieveData() {
let dbReq = indexedDB.open('myChatDb', 1);
let db;
let objectStore;
let results;
let transaction;
let data = new Array();
await dbReq.onsuccess = function (event) {
db = (event.target as IDBOpenDBRequest).result;
transaction = db.transaction(["customer-messages"]);
objectStore = transaction.objectStore('customer-messages');
results = objectStore.openCursor();
results.onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
data.push(cursor.value);
cursor.continue();
} else {
console.log(data);
console.log(data.length + " array length line 36");
}
}
return data;
}