如何在 javascript 中使用 aynsc/await 从异步操作返回对象

Question

我终其一生都无法弄清楚为什么 async/await 的行为方式会如此。

考虑这个例子。

我想要一个函数来进行一些数据库初始化，并在完成后返回我的数据库对象。

var globalDb = null;

const IDB_DATABASE_NAME = "mydb";
const IDB_STORE_NAME = "mystore";
const IDB_VERSION = 1.0;

async function initDb() {
    var idbOpenDbRequest = window.indexedDB.open(IDB_DATABASE_NAME, IDB_VERSION);

    idbOpenDbRequest.onsuccess = function (event) {
            return event.target.result;
    };
}

(async () => {
    globalDb = await initDb();
    console.log("I should happen second")
    console.log(globalDb);
})();

预期

1. console.log("我应该先发生")
2. console.log("我应该第二次发生")
3. console.log(globalDb); //将对象转储到控制台

实际

1. console.log("我应该第二次发生")
2. console.log(globalDb); //未定义
3. console.log("我应该先发生")

我意识到我从根本上误解了这里的一些东西。请告诉我为什么 await 不能像我预期的那样工作。 :)

JsFiddle

https://jsfiddle.net/p2jqyrou/2/

附言。忘记这是关于 indexedDb 的，并且这个示例非常简化 - 我认为这对于这个问题的主题并不重要。

Answer 1

所以问题出在您的initDb 函数上。我会为你重写它，然后解释为什么这个版本可以工作：

function initDb() {
    var idbOpenDbRequest = window.indexedDB.open(IDB_DATABASE_NAME, IDB_VERSION);

    return new Promise((resolve, reject) => {
        idbOpenDbRequest.onsuccess = function (event) {
            setTimeout(function () {
                console.log("I should happen first");
                resolve(event.target.result);
            }, 2000);
        };
    })
}

我所做的是将onsuccess 回调包装在Promise 中。 Javascript 中的 async/await 模式基本上是基于 Promises 的。要么您自己返回 Promise，要么将结果包装在 Promise 中（并立即解决它）。

因为您自己没有返回 Promise，所以它试图将返回值（未定义）包装在 Promise 中。然后它立即解决了导致异步函数返回的问题。

使用此更新后的代码initDb 被调用，然后返回一个 Promise，该 Promise 仅在建立连接并触发超时后才解决。