Uncaught SyntaxError: await is only valid in async functions...，以及async的就近原则

最新推荐文章于 2024-11-24 09:56:28 发布

东之建大坏蛋

最新推荐文章于 2024-11-24 09:56:28 发布

阅读量1.2w

点赞数 6

分类专栏： web前端文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/WanweI897/article/details/123889442

版权

web前端专栏收录该内容

34 篇文章

订阅专栏

本文指导如何修复UncaughtSyntaxError: await is only valid in async functions...问题，重点讲解await关键字需在async函数内，并介绍async的就近原则，通过实例解析异步函数和模块顶层的适用规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你遇到这个问题时：Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules。
你就要去看一下你的await关键字是否放在async声明的函数里面，正确写法如下：

async function insideFn() {
   await promiseFn()
   console.log('第二步执行完毕')
 }

async的就近原则
有时候我们在async声明的函数里面使用await还是出现会上面的错误，比如下面代码会报错：

function promiseFn() {
    return new Promise((res) => {
      setTimeout(() => {
        console.log('第一步执行完毕');
        res('done')
      }, 500)
    })
  }

  async function outsideFn(){

    function insideFn() {
      await promiseFn()
      console.log('第二步执行完毕')
    }

    insideFn()
  }

  outsideFn()

这是因为await调用promise时，它所处的最近一层函数是insideFn，而async声明在更外部的函数outsideFn里面，这时我们只需要将async放入离await最近的函数insideFn就好，这就是async的就近原则：

function outsideFn(){

    async function insideFn() {
      await promiseFn()
      console.log('第二步执行完毕')
    }

    insideFn()
  }

在这里插入图片描述