我对JSpromise 和Async很不满意,我面临着一个问题.

首先要做的是简化代码:

self.addEventListener('push', (event) => {
    const data = event.data ? event.data.json() : {}
    if (isClientFocused()) {
        console.log('Don\'t need to show a notification.');
        return;
    }
    event.waitUntil(
        self.registration.showNotification(data.title, data)
    )
});

function isClientFocused() {
    return self.clients.matchAll({
        type: 'window',
        includeUncontrolled: true
    })
        .then((windowClients) => {
            let clientIsFocused = false;
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                if (windowClient.focused) {
                    clientIsFocused = true;
                    break;
                }
            }
            return clientIsFocused;
        });
}

这个概念非常简单:我的函数isClientFocused根据情况返回truefalse,我想在我的事件侦听器的if中使用这个值作为条件.

我知道isClientFocused函数工作得很好,每次都会按预期返回结果,但在if条件下使用时,它总是记录Don't neet to show notification.

我想这只是一个实现问题,但我现在有点迷路了.

首先要感谢你的帮助.

推荐答案

只需添加异步/等待,因为isClientFocused()返回一个promise ,并且它是真的,并且条件总是真的.使用await的解析值,您会得到一个正确的逻辑. 此外,您还应立即拨打event.waitUntil(同步):

self.addEventListener('push', event => event.waitUntil((async () => {
   if (await isClientFocused()) {
       console.log('Don\'t need to show a notification.');
       return;
   const data = event.data?.json() ?? {};
   return self.registration.showNotification(data.title, data)
})()));

我建议将isClientFocsed()与Async/AWait一起重构,并尽可能多地使用Aync/AWait,以避免then().你也可以用Array::some()来代替你的循环.

在我的经验中,当学习了Async/AWait时,async/await会导致错误更少,可读性和可维护性更好.

当我将一个有错误的then()代码重构为async/await代码时,这些错误自动消失了,这真是令人惊讶.

async function isClientFocused() {
    const windowClients = await self.clients.matchAll({
        type: 'window',
        includeUncontrolled: true
    });
    return windowClients.some(windowClient => windowClient.focused);
}

Javascript相关问答推荐

访客柜台的风格React.js

在时间轴完整日历中显示日期标题

如何在不分配整个数组的情况下修改包含数组的行为主体?

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%,而无需父母有明确的/固定的宽度和高度,替代方法吗?

从mat—country—select获取整个Country数组

Redux查询多个数据库Api reducerPath&

Phaser 3 console. log()特定游戏角色的瓷砖属性

使用JavaScript重新排序行

如何使用子字符串在数组中搜索重复项

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

这个值总是返回未定义的-Reaction

为什么123[';toString';].long返回1?

JQuery Click事件不适用于动态创建的按钮

未加载css colored颜色 ,无法将div设置为可见和不可见

将基元传递给THEN处理程序

在Odoo中如何以编程方式在POS中添加产品

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

Node.js API-queryAll()中的MarkLogic数据移动

用于测试其方法和构造函数的导出/导入类

在JavaScript中将Base64转换为JSON