服务人员：async await 与 waituntil 结合使用无法正常工作答案

【问题标题】：service workers: async await in combination with waituntil is not working properly服务人员：async await 与 waituntil 结合使用无法正常工作
【发布时间】：2017-11-15 23:30:39
【问题描述】：

在使用async/await 语法时，我在服务工作者中与承诺作斗争。
以下情况：我收到了推送通知并想处理点击事件。如果我使用带有then 和catch 的“旧”语法，我可以遍历客户端列表并对其进行处理。如果我对async/await 使用我喜欢的方式，它不会做任何事情。

self.addEventListener("notificationclick", event => {

  // is working
  event.waitUntil(self.clients.matchAll().then(clientList => {
    console.log(clientList);
  }));

  // is not working
  event.waitUntil(async () => {
    const clientList = await self.clients.matchAll();
    console.log(clientList);
  });
});

【问题讨论】：

看起来waitUntil 接受了一个承诺，因为它是一个参数，而不是一个函数。也许如果您立即调用异步函数，它会起作用。例如：event.waitUntil( (async () => { ... })() )
@CRice 是正确的，你在这里传递一个函数不是一个承诺。你可以使用 IIF 方式，但我想说一个更明显更容易理解的方式是创建一个名为 getClients 的函数，它包含你所有的异步内容，然后执行 event.waitUntil(getClients());
@CRice 和@Keith 谢谢你们俩。你完全正确。我混淆了一些东西......我还尝试使用“外部”异步函数，因为我知道它会返回一个承诺。但实际上我只是传递了它的引用而不是调用它（waitUntil(getClients) vs waitUntil(getClients())

标签： javascript push-notification async-await service-worker service-worker-events

【解决方案1】：

感谢@Crice 和@Keith，

waitUntil 需要一个 Promise 作为参数而不是一个函数。所以这是 async/await 风格的工作示例：

self.addEventListener("notificationclick", event =>
{
    event.waitUntil(getClients());
});

async function getClients()
{
    const clientList = await self.clients.matchAll();
    console.log(clientList);
}

【讨论】：

你能告诉我你的例子（在Q中）和这个有什么区别吗？因为看起来你正在向两者传递一个异步函数..那么是什么让一个承诺而另一个不是？这行得通吗： event.waitUntil( (async () => { /* code */ }()) );
实际上，我在问题的示例中没有使用 iife - 换句话说：我忘记了括号。所以它只返回一个函数，而不是一个承诺。 let a = (async() => { return Promise.resolve() })(); console.log(typeof a, a instanceof Promise); // object true vs. let b = async() => { return Promise.resolve() }; console.log(typeof b, b instanceof Promise); // function false 在我的回答中，我调用了异步函数，它也返回了一个承诺。在我将函数作为参数传递给event.waitUntil 函数之前（再次，只是忘记了括号）。

【解决方案2】：

您可以修改您的原始代码以将异步 IIFE 设为

  // should be working now
  event.waitUntil( (async () => {
    const clientList = await self.clients.matchAll();
    console.log(clientList);
  })() );

添加的 ( ) 将立即调用异步函数，因此名称为 async IIFE

【讨论】：