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

Question

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

尝试为具有异步样式的服务工作者创建安装函数时：

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 函数不是承诺，它是 returns 承诺的函数。

调用您的函数并将其 returns 的承诺传递给 waitUntil:

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

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

JavaScript how to use event.waitUntil() to wait for an async function call

javascript

async-await

progressive-web-apps