vue3使用8--等待异步操作时渲染（suspense，模拟和axios采集）

最新推荐文章于 2024-08-20 19:49:41 发布

chencaw

最新推荐文章于 2024-08-20 19:49:41 发布

阅读量1.4k

点赞数

分类专栏： vue3 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/chencaw/article/details/119926589

版权

vue3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js应用中使用Suspense组件进行异步组件加载，并结合axios实现从远程获取数据。通过设置网络模拟速度，展示了延迟加载的效果，同时提供了AsyncComponent和AsyncAddress组件的示例代码。

摘要由CSDN通过智能技术生成

可以在chrome中选择网络模拟速度

1、测试1、模拟延迟测试

（1）主程序

<template>
  <h2>App父级组件：Suspense组件的使用</h2>
  <Suspense>
    <template #default>
      <!-- 异步组件 -->
        <async-component />
    </template>
    <template v-slot:fallback>
      <!-- loading的内容 -->
      <h2>Loading</h2>
    </template>
  </Suspense>

</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
import AsyncComponent from "./AsyncComponent.vue";
//引入组件：静态引入和动态引入

//vue2中的动态引入组件的写法：在vue3中这种写法不行
// const AsyncComponent = () => import("./AsyncComponent.vue");

//vue3中的动态引入组件的写法
// const AsyncComponent = defineAsyncComponent(
//   () => import("./AsyncComponent.vue")
// );
export default defineComponent({
  name: "App",
  components: { 
    AsyncComponent 
  },
});
</script>
<style>
</style>

（2）加载子程序

<template>
  <h2>AsyncComponent子级组件</h2>
  <h3>{{ msg }}</h3>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AsyncComponent",
  setup() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          msg: "hello, how are you!",
        });
      }, 2000);
    });
  },
});
</script>
<style>
</style>

2、axios异步采集数据

address.json中的内容

{
    "id":1,
    "address":"北京市昌平区宏福苑",
    "distance":"2000m"
}

（1）主程序

<template>
  <h2>App父级组件：Suspense组件的使用</h2>
  <Suspense>
    <template #default>
      <!-- 异步组件 -->
      <!-- <async-component /> -->
      <AsyncAddress />
    </template>
    <template v-slot:fallback>
      <!-- loading的内容 -->
      <h2>Loading</h2>
    </template>
  </Suspense>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
// import AsyncComponent from "./AsyncComponent.vue";
import AsyncAddress from "./AsyncAddress.vue";
//引入组件：静态引入和动态引入

//vue2中的动态引入组件的写法：在vue3中这种写法不行
// const AsyncComponent = () => import("./AsyncComponent.vue");

//vue3中的动态引入组件的写法
// const AsyncComponent = defineAsyncComponent(
//   () => import("./AsyncComponent.vue")
// );
export default defineComponent({
  name: "App",
  components: {
    // AsyncComponent
    AsyncAddress,
  },
});
</script>
<style>
</style>

（2）异步加载程序

<template>
  <h2>AsyncAddress组件</h2>
  <h3>{{data}}</h3>
</template>
<script lang="ts">
//引入axios
import axios from "axios";
import { defineComponent } from "vue";
export default defineComponent({
  name: "AsyncAddress组件",
  setup() {
    return axios
      .get("/data/address.json")
      .then((response) => {
        return {
          data: response.data,
        };
      })
      .catch();
  },
});
</script>
<style>
</style>