在Vue3中生命周期函数调用一步请求，组件的外部必须使用Suspense标签进行嵌套以等待异步方式的结束，可以进行页面加载展示。同事可以进行错误信息的页面处理
sus.vue
<template>
<div id="app">
<div v-if="error">{{error}}</div>
<Suspense v-else>
<template #default>
<user/>
</template>
<template #fallback>
Loading.....
</template>
</Suspense>
</div>
</template>
<script>
import User from "./User"
import {ref,onErrorCaptured} from "vue"
export default {
components:{
'user':User
},
setup(){
const error = ref(null)
onErrorCaptured(e=>{
error.value = e
return true
})
return {error}
}
}
</script>
user.vue
<template>
<div>
<h1>{{ user.name }}</h1>
<h1>{{ user.age }}</h1>
</div>
</template>
<script>
export default {
async setup() {
const fetchUser = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ name: "Carlo", age: "20" });
// reject("获取信息失败！");
}, 3000);
});
};
const user = await fetchUser();
return { user };
},
}
</script>
页面会先展现Loading ,3s之后会展示user.vue
如果把 resolve({ name: "Carlo", age: "20" }); 注释，reject("获取信息失败！");放开，则会展示错误信息
