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>
效果
调用请求的 loading效果
请求 返回数据时候
请求 返回错误时候
到此这篇关于vue3之Suspense加载异步数据的使用的文章就介绍到这了,更多相关vue3 Suspense加载异步内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
相关文章
Shirley
2020-05-10
Claire
2021-05-21
Ora
2023-07-20
Fern
2023-07-20
Grizelda
2023-07-20
Janna
2023-07-20
Ophelia
2023-07-21
Crystal
2023-07-21
Laila
2023-07-21
Aine
2023-07-21
Bliss
2023-07-21
Lillian
2023-07-21
Tertia
2023-07-21
Olive
2023-07-21
Tricia
2023-07-21
Angie
2023-07-21
Nora
2023-07-24
