Hi Dai Gei Ho~ 我是Winnie ~
不知道大家记不记得,在昨天文章中我们提到了 如果在生命周期hooks中使用 async/await 是没有效果的,因为 生命周期hooks是采取同步执行的方式,但...终究我吃过的米还是不够多XD,经过前辈的提醒(这边再次感谢 Kuro大大),其实在Vue3 有个例外可以使用,也就是 Suspense。
要怎麽使用?那就直接让我们来看看吧~
Suspense 是 Vue3新增的API,其主要作用是 让我们在进行非同步资料载入时,可以先提供 初始内容 来显示,当非同步加载完後在显示其请求的内容,做到 简化非同步请求UI的处理逻辑。
如何使用呢? 先来让我们看看以下例子:
下方为一个 负责处理 API 的非同步元件,透过 fetch 的方式来 取得API资料回传给 template 使用。
// Picture.vue 子元件
<template>
<div class="pic">
<img :src="data.src" alt="">
</div>
</template>
<script>
const requestUrl = `../../public/Pic.json`;
export default {
async setup() { //此时在此元件中可以使用 setup 加上 async 。
const response = await fetch(requestUrl)
.then(res => res.json())
.then(data => data)
return{
data :response[0]
}
}
}
</script>
接着 我们在上层元件 中的 template 新增一个 Suspense,而在其之中会有两个元件被 所包覆,分别是 default
与#fallback
,
default
负责显示 非同步请求的元件内容,如果没有就会显示 #fallback
元件内容。 范例如下:
// App.vue元件
<template>
略..
<Suspense>
<template #fallback> //如果 非同步未完成会显示 #fallback 内容
<Loading/>
</template>
<template #default>
<Picture/>
</template>
</Suspense>
</template>
略..
而这边需注意,在官方文件有提到 元件主要提供了另一个方案,允许将等待过程提升到元件树中来处理,而不是在单一元件之中。
也就是说 如果我们在爸爸阶层那辈 来使用 async setup()
画面还是会坏掉的。
ps.我的小新好可爱喔
当 <template #default>
中内部的API发生错误时,我们可以透过 onErrorCaptured
生命周期hooks 来找出 Suspense 里面的错误。
以上就是针对 Suspense的基础介绍,如有问题欢迎大家多多指教,感恩的心。
-- 国庆连假最後一天的深夜电台 --
今天听的是好乐团 x 玛啡因 ─ 我们一样可惜..
这首歌也是我很喜欢的歌之一,强烈推荐大家可以 听听看
不是什麽正面能量的歌 而是一首可以与自己深入谈话的歌 ,适合在深夜来疗癒自己
ps 我爱 好乐团..
<<: 自动化 End-End 测试 Nightwatch.js 简易化 selector
>>: Day27:今天我们来聊一下将Microsoft 365 Defender 连接到 Azure Sentinel
JS背景 Javascript是由网景(Netscape)公司所开发的,当时网景公司的头号对手是微软...
黑色购物节,只有9天:所有方案7折 折扣内容:所有方案皆享「7折」优惠 折扣期间:2020/11/...
网路基础架构做完上一篇的分区与 IP 分配後,下一步就要开始针对每一个区域的性质调整各项防护措施,以...
看到这个标题,你或许会有一点疑惑,为什麽他不是以 Flask 开头?因为它是一个资料库的名称,而 F...
1.add report 2.add dataset 3.edit param be mulit 2...