Vue——vue3 Suspense 异步请求的使用_vue3 异步请求

子组件：

my-project\src\components\AsyncShow.vue

<template>
  <h1>{{ result }}</h1>
</template>
1
2
3

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    return new Promise((resolve) => {
      setTimeout(() => {
        return resolve({
          result: 42,
        });
      }, 3000);
    });
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用：

父组件：

my-project\src\App.vue

<template>
  <Suspense>
    <!--  请求成功返回的数据 -->
    <template #default>
      <async-show />
    </template>
    <!-- 请求失败显示的数据 -->
    <template #fallback>
      <h1>Loading !...</h1>
    </template>
  </Suspense>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

<script lang="ts">
import AsyncShow from "./components/AsyncShow.vue";
export default {
  name: "App",
  components: {
    AsyncShow,
  },
</script>
1
2
3
4
5
6
7
8

效果：3秒后显示结果