Chrome扩展按钮事件监听器中调用异步函数无输出问题

你的代码里第二个console.log没执行的核心原因是：你定义了一个异步自执行函数，但没有实际调用它。

看这段代码：

(async () => {
    console.log('Clicked on 2 btn update prices crossed ');
    // ... 其他代码
})

这里只写了函数定义，缺少末尾的()来执行它，应该改成：

(async () => {
    console.log('Clicked on 2 btn update prices crossed ');
    // ... 其他代码
})() // 这里加()执行函数

另外还有几个需要修复的问题：

• var url = 后面没有赋值，会导致fetch(url)报错
• result = response; 里的result没有用let/const声明，会变成全局变量
• 循环里使用fetch是并行执行的，如果需要按顺序执行，应该改用await fetch(...)，避免同时发起过多请求

修复后的完整代码示例：

let btn2 = document.getElementById("btn2");
btn2.addEventListener('click', async event => { // 直接把事件处理函数改成异步，更简洁
    console.log('Clicked on 2 btn update prices ');
    console.log('Clicked on 2 btn update prices crossed ');
    let productslist = await enumStorage();
    const Email = await chrome.storage.local.get(['Email']);
    console.log(await enumStorageAll());
    
    for (let i = 0; i < productslist.length; i++) {
        let values = productslist[i];
        // 这里给url赋值，比如从values里取链接
        var url = values.Link; 
        console.log(url);

        try {
            const response = await fetch(url);
            const result = await response.json(); // 假设返回的是JSON，根据实际情况调整
            if ("Image" in result) {
                UpdateRows(values, pricewithlink, shops, i);
            }
        } catch (error) {
            console.log(error);
        }
    }
});

这样修改后，第二个console.log就能正常输出，后续的异步逻辑也能按预期执行。

内容的提问来源于stack exchange，提问作者Saad