这篇文章主要介绍了vue3之Suspense加载异步数据怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3之Suspense加载异步数据怎么使用文章都会有所收获，下面我们一起来看看吧。
Suspense使用
<template> <Suspense> <template #default> <ProductList></ProductList> </template> <template #fallback> <div>loading...</div> </template> </Suspense> </template> <script setup lang="ts" name="Cart"> import ProductList from "./ProductList.vue"; </script> <style lang="scss" scoped></style>
组件
使用 flag 与 Promise 来模拟异步加载数据，渲染成功与失败的页面效果
<!-- -->
<template>
<div v-if="data">
ProductList
<div>data父 - {{ data }}</div>
</div>
<div v-if="err">
{{ err }}
</div>
</template>
<script setup lang="ts" name="ProductList">
import { ref } from "vue";
const data = ref<any>(null);
const flag = false;
const err = ref(null);
function aaa() {
return new Promise((resolve) => {
setTimeout(() => {
if (!flag) {
return resolve({ code: 0, errorMsg: "参数错误" });
}
return resolve({
code: 200,
data: {
result: 42,
},
});
}, 3000);
});
}
const res = await aaa();
console.log(res);
if (res.code === 200) {
data.value = res.data.result;
} else {
data.value = "";
err.value = res.errorMsg;
}
</script>
<style lang="scss" scoped></style>