SyntaxError：异步函数中出现意外的保留字“等待”

Posted 2023-03-07

【中文标题】SyntaxError：异步函数中出现意外的保留字“等待”

【英文标题】：SyntaxError: unexpected reserved word 'await' in async function

【发布时间】：2021-10-03 20:14:02

【问题描述】：

这是我的代码。 无法弄清楚为什么会发生错误。该函数是异步类型的。

const func = async () => 
      submission[0].emoticons.map((item, idx) => 
        console.log('apngToFrame is working')
        const imgsrc = `$url$item.id`
        var container2 = document.querySelector('.output2')
        const response = await fetch(imgsrc)
        const buffer = await response.arrayBuffer()
        const apng = parseAPNG(buffer)
        if (apng instanceof Error)
          console.error('apng.message', apng.message)
          return ;
        
        await apng.createImages()
        apng.frames.forEach(f => 
          container2.appendChild(f.imageElement)
        )
      )
    

【问题讨论】：

这些行在里面的函数是以这个开头的函数：(item, idx) => 。这不是一个异步函数。

await 仅在异步函数中有效。 emoticons.map 方法的回调不是 async。将其更改为 async (item, idx)

你为什么使用map？你没有使用它的结果，也没有返回任何东西。请改用forEach。

等待不在 async 函数内。看看：.emoticons.map((item, idx) => 你正在使用的函数中没有async关键字await在

@SebastianSimon 对于这个特定的用例，他甚至不应该使用forEach，因为它仍然存在问题，因为它是一个函数。他需要使用for 或while 循环并且没有函数

【参考方案1】：

为您在地图中使用的回调函数添加异步

const func = async () => 
      submission[0].emoticons.map(async(item, idx) => 
        console.log('apngToFrame is working')
        const imgsrc = `$url$item.id`
        var container2 = document.querySelector('.output2')
        const response = await fetch(imgsrc)
        const buffer = await response.arrayBuffer()
        const apng = parseAPNG(buffer)
        if (apng instanceof Error)
          console.error('apng.message', apng.message)
          return ;
        
        await apng.createImages()
        apng.frames.forEach(f => 
          container2.appendChild(f.imageElement)
        )
      )