JavaScript 如何使用 event.waitUntil() 等待异步函数调用

Question

在学习 JavaScript 时，它建议使用 async/await，因为它比 .then 更具可读性，我同意。不幸的是，当谈到 PWA 服务 worker 时，async 似乎被遗忘了。

尝试为具有异步风格的服务 worker 创建安装函数时:

const cacheVersion = "v1";
const cacheAssets = [
    "/",
    "/index.html",
    "/static/img/logo.svg",
];

async function install(version, assets) {
    const cache = await caches.open(version);
    console.log("Doing stuff....");
}

self.addEventListener("install", (event) => {
    console.log("Service Worker INSTALL START");
    event.waitUntil(install, cacheVersion, cacheAssets); // <--- Does not call install()
    console.log("Service Worker INSTALL COMPLETE");
});

install 函数永远不会运行。如果我改变这一行:

event.waitUntil(install, cacheVersion, cacheAssets);

到

install(cacheVersion, cacheAssets);

然后该行运行，但没有等待，导致问题。

如何使用 event.waitUntil 调用异步函数并等待它？

对我来说 event.waitUntil 就像 await，那么为什么要有这个阻塞主循环的奇怪的特殊函数，而 JS 中似乎没有其他函数呢？我觉得很奇怪。

Answer 1

install 不会被调用，因为您没有调用它。 waitUntil接受一个promise，而不是一个函数。 async 函数不是 promise ，它是返回 promise 的函数。

调用您的函数并将它返回的 promise 传递给 waitUntil:

event.waitUntil(install(cacheVersion, cacheAssets));
// −−−−−−−−−−−−−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−^