在项目开发中，我们经常遇到这样一个问题
在我们请求接口数据过程中，从发起请求到拿到响应数据这段时间，我们通常会加一些提示性的内容在页面上，待接口请求完成再换成真实的内容，以提高用户的体验。

想必大家也和我一样，觉得这个过程很繁琐。。

而suspense组件就是用来解决这个繁琐的过程的

来看看它的使用
想要实现这个功能，我们需要在setup中返回一个promise实例
我这里配合async/await来实现，具体代码如下

// 子组件
<template>
  <div>
    {{ result }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
export default defineComponent({
  async setup () {
    const rawData = await axios.get('https://dog.ceo/api/breeds/image/random')
    return {
      result: rawData.data
    }
  }
})
</script>

// 父组件
<template>
  <suspense>
    <!-- #default 异步组件加载完成后页面呈现的内容 -->
    <template #default>
      <dog-show />
    </template>
    <!-- #fallback 异步组件加载完成前页面呈现的内容 -->
    <template #fallback>
      <h1>loading...</h1>
    </template>
  </suspense>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import DogShow from '../../components/DogShow.vue'
export default defineComponent({
  components: {
    DogShow
  }
})
</script>

以上就是suspense的使用，看起来比较简单。