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加载异步内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!