记一次误用顶层await导致的路由渲染错误

简介: 顶层 await 是ES2022的标准语法,在使用时需要注意,必须放到模块顶层使用。

背景:顶层 await

Async 异步函数能将 Promise 的链式调用的形式,改为同步的形式,对于编写和阅读代码都非常友好。但一直以来都有一个限制,就是 async 和 await 这两个关键字必须成对出现。这就导致了一个问题,想使用 await,必须要将其定义在一个 async 函数中,再调用此函数。所以 ECMAScript 中一直有一个提案,叫做顶层 await,它 支持在 async 函数以外使用 await,但是只能在一个模块的顶层中使用。这个提案于2022年正式成为 ES 标准语法。

过去的写法是这样的:

async function fn() {
  const value = await 10; // await 不仅可以接Promise,也可以将普通值
  console.log(value)
}

main();

使用顶层await 之后,就可以这样写了:

const value = await 10;
console.log(value)

但是一定有一个前提,必须处于模块的顶层。我就是没有注意这一点,导致出现了一个问题。

bug 出现

有一次开发时突发奇想,想用一下这个顶层await。于是写下了类似下面的代码:

<script setup>

const res = await axios(url)

</script>

然后过了一会,等去调试页面时才发现已经白屏了。于是打开调试工具,在元素面板中看到了整个页面的路由都没有渲染出来,只剩下一个空注释节点了:

image.png

在控制台中看到了如下警告:

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.

起初按照直觉,以为是路由表配置出了问题,导致路由渲染不出来,反复调试路由配置,始终不奏效。然后搜索这条警告信息,果然有不少朋友都遇到过,无一例外是在 <script setup> 中使用了顶层 await。那我就纳闷了,说好的顶层await怎么不好用了呢?

盯着代码想了一会,突然想起 <script setup> 只是语法糖啊!那么上面的代码就相当于在 setup 方法中使用了 await:

<script>
export default {
  setup() {
      const res = await axios(url)
  }
}
</script>

这自然不是在模块顶层中使用了,也就导致了在解析上出现问题,导致组件不能正确渲染,最终导致对应的路由视图没有渲染出来。

小结

起初由于空页面,空节点,误解是路由的问题。其实 <router-view> 之所以被渲染成注释节点,看似是路由组件没有正确渲染,也有可能是组件本身出了问题。另外,在使用一些新特性要特别注意使用条件。

目录
相关文章
|
4天前
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
|
4天前
|
自然语言处理 JavaScript 前端开发
作用域的概念及作用?作用域的分类?.js 属于哪种作用域?
作用域的概念及作用?作用域的分类?.js 属于哪种作用域?
38 0
|
4天前
|
JavaScript 前端开发
js中new关键字的作用,new一个对象的过程中发生了什么
js中new关键字的作用,new一个对象的过程中发生了什么
|
9月前
|
前端开发
前端学习笔记202307学习笔记第五十九天-react源码-callback函数内部this指向2
前端学习笔记202307学习笔记第五十九天-react源码-callback函数内部this指向2
31 0
|
4天前
|
JavaScript 前端开发
js函数:函数是JS的基本组成单元,用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。具体案例详解
js函数:函数是JS的基本组成单元,用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。具体案例详解
34 1
|
8月前
|
JavaScript
动态给vue的data添加一个新的属性时会发生什么?怎样解决?
动态给vue的data添加一个新的属性时会发生什么?怎样解决?
143 1
|
10月前
|
C#
Blazor嵌套传递
Blazor嵌套传递
43 0
Blazor嵌套传递
|
11月前
index.js:39 错误:修饰类属性失败。请确保提案类属性已启用并设置为使用松散模式。要在规范模式下将提案类属性与修饰器一起使用,请在阶段 2 中等待下一个主要版本的装饰器。 #79
index.js:39 错误:修饰类属性失败。请确保提案类属性已启用并设置为使用松散模式。要在规范模式下将提案类属性与修饰器一起使用,请在阶段 2 中等待下一个主要版本的装饰器。 #79
53 0
|
移动开发 JavaScript weex
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
174 0
|
移动开发 JavaScript weex
weex-怎么定义全局方法
weex-怎么定义全局方法
81 0