async setup() 引发异常

daiwenzh5
Vue3异常

发布于：2021年12月9日
次浏览

问题描述

在 uniapp 项目中使用 vue3 开发，在 setup script 标签中使用顶层 await 语句，导致页面空白，而控制台打印异常。

项目环境

1
2
编译器: HBX 3.3 Beta
vue: 3.2.23

异常原因

这是因为 顶层 await 必须配合 async setup() 必须与 Suspense 组合使用，而当前版本的 uniapp 并不支持该组件。

解决方案

在 setup script 中使用 nextTick 方法，在回调中使用 await 语句，而非在顶层使用。

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { ref, nextTick } from "vue";
// 定义任意响应对象
const anything = ref("hello");
nextTick(async () => {
  // 执行异步方法
  const res = await asyncFunction();
  // 将返回结果，回写到响应对象的值中
  anything.value = res;
});
</script>

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://daiwenzh5.github.io/2021/12/09/yuque/async%20setup()%20%E5%BC%95%E5%8F%91%E5%BC%82%E5%B8%B8/

更新于：2022年4月17日

异常

Vue3

Uniapp

async setup

评论