uni-app vue3无法使用顶层的await

uni-app vue3无法使用顶层的await

示例代码：

<script setup>
await promise
</script>

操作步骤：

  • 使用顶层的await

预期结果：

  • 可以正常使用顶层的await

实际结果：

  • 使用报错

bug描述：

在vue3里面，怎么使用顶层的await。 使用了顶层的await后，vue报了一个错误 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。

但是uniapp这边好像页面组件的渲染，我们开发人员好像配置不了。我要怎么才能在页面组件外层，再包裹一层Suspense组件呢？ 或者有没有其它方式，处理这个问题的？


更多关于uni-app vue3无法使用顶层的await的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

uniapp 暂不支持 Suspense 组件，不能使用 顶层await

更多关于uni-app vue3无法使用顶层的await的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用Vue3的顶层await确实需要注意Suspense的问题。以下是解决方案：

  1. 对于页面组件，可以直接在onLoad生命周期中使用await：
<script setup>
import { onLoad } from '@dcloudio/uni-app'

onLoad(async () => {
  await somePromise()
})
</script>
  1. 如果必须在setup顶层使用await，可以这样处理：
<script setup>
const data = await somePromise().catch(err => {
  console.error(err)
  return null
})
</script>
  1. 对于组件，可以在父组件中使用Suspense包裹：
<template>
  <Suspense>
    <MyAsyncComponent />
  </Suspense>
</template>
回到顶部