首页 >编程 >正文

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>

效果

调用请求的 loading效果

vue3之Suspense加载异步数据的使用

请求 返回数据时候

vue3之Suspense加载异步数据的使用

请求 返回错误时候

vue3之Suspense加载异步数据的使用

到此这篇关于vue3之Suspense加载异步数据的使用的文章就介绍到这了,更多相关vue3 Suspense加载异步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

网友评论

验证码 换一张
取 消
暂无评论...
三日内热门评论文章
关键词
为您推荐
  • 相关阅读
  • 业界资讯
  • 手机通讯
  • 电脑办公
  • 新奇数码
  • 软件游戏
  • 科学探索