Day_29:让 Vite 来开启你的Vue之 跌入深坑_ Suspense非同步元件(续上集)

Hi Dai Gei Ho~ 我是Winnie ~

不知道大家记不记得,在昨天文章中我们提到了 如果在生命周期hooks中使用 async/await 是没有效果的,因为 生命周期hooks是采取同步执行的方式,但...终究我吃过的米还是不够多XD,经过前辈的提醒(这边再次感谢 Kuro大大),其实在Vue3 有个例外可以使用,也就是 Suspense

要怎麽使用?那就直接让我们来看看吧~

什麽是 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.我的小新好可爱喔

遇到 API错误了怎麽办?

<template #default>中内部的API发生错误时,我们可以透过 onErrorCaptured 生命周期hooks 来找出 Suspense 里面的错误。

以上就是针对 Suspense的基础介绍,如有问题欢迎大家多多指教,感恩的心。

-- 国庆连假最後一天的深夜电台 --

今天听的是好乐团 x 玛啡因 ─ 我们一样可惜..

这首歌也是我很喜欢的歌之一,强烈推荐大家可以 听听看

不是什麽正面能量的歌 而是一首可以与自己深入谈话的歌 ,适合在深夜来疗癒自己

ps 我爱 好乐团..


<<:  自动化 End-End 测试 Nightwatch.js 简易化 selector

>>:  Day27:今天我们来聊一下将Microsoft 365 Defender 连接到 Azure Sentinel

【後转前要多久】# Day22 JS - JavaScript 介绍、Debug方法

JS背景 Javascript是由网景(Netscape)公司所开发的,当时网景公司的头号对手是微软...

WP Rocket 一整年难得的7折优惠+7款外挂测速比较

黑色购物节,只有9天:所有方案7折 折扣内容:所有方案皆享「7折」优惠 折扣期间:2020/11/...

网路架构检视 - 连线存取、防火墙

网路基础架构做完上一篇的分区与 IP 分配後,下一步就要开始针对每一个区域的性质调整各项防护措施,以...

Day 25 Redis (上)

看到这个标题,你或许会有一点疑惑,为什麽他不是以 Flask 开头?因为它是一个资料库的名称,而 F...

[Report] 怎麽让筛选条件可以复选

1.add report 2.add dataset 3.edit param be mulit 2...