在項目開發(fā)中累澡，我們經(jīng)常遇到這樣一個問題
在我們請求接口數(shù)據(jù)過程中均芽，從發(fā)起請求到拿到響應數(shù)據(jù)這段時間，我們通常會加一些提示性的內(nèi)容在頁面上，待接口請求完成再換成真實的內(nèi)容端衰，以提高用戶的體驗。
想必大家也和我一樣圃庭，覺得這個過程很繁瑣吏颖。。
而suspense組件就是用來解決這個繁瑣的過程的
來看看它的使用
想要實現(xiàn)這個功能季希，我們需要在setup中返回一個promise實例
我這里配合async/await來實現(xiàn)褪那，具體代碼如下
// 子組件
<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 異步組件加載完成后頁面呈現(xiàn)的內(nèi)容 -->
<template #default>
<dog-show />
</template>
<!-- #fallback 異步組件加載完成前頁面呈現(xiàn)的內(nèi)容 -->
<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的使用，看起來比較簡單式塌。
