在项目开发中，我们经常遇到这样一个问题
在我们请求接口数据过程中，从发起请求到拿到响应数据这段时间，我们通常会加一些提示性的内容在页面上，待接口请求完成再换成真实的内容，以提高用户的体验。
想必大家也和我一样，觉得这个过程很繁琐。。
而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的使用，看起来比较简单。
