Vue.js 3.0 的 Suspense组件
效果:
目录:
Article.vue:
<template>
<div>{{ res.title }}</div>
</template>
<script>
const getArticle = async () => {
const res = await new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve({ title: "正确加载内容!" });
} else {
reject({ msg: "呃,出了点问题~" });
}
}, 1000);
});
return res;
};
export default {
async setup() {
const res = await getArticle();
return {
res,
};
},
};
</script>
<style>
</style>
Home.vue:
<template>
<div v-if="errMsg" style="color:red;">{{errMsg}}</div>
<Suspense v-else>
<template #default>
<Article></Article>
</template>
<template #fallback>
<div>正在玩命加载中...</div>
</template>
</Suspense>
</template>
<script>
import { onErrorCaptured, reactive, toRefs } from 'vue'
import Article from '../components/Article'
export default {
components: {
Article
},
setup() {
const state = reactive({
errMsg: null
})
onErrorCaptured(e => {
state.errMsg = e.msg
})
let { errMsg } = toRefs(state)
return {
errMsg
}
}
}
</script>
<style>
</style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步