iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 29

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 我愛 好樂團..


上一篇
Day_28:讓 Vite 來開啟你的Vue之 跌入深坑_生命週期 hooks 與 async/await
下一篇
Day_30:讓 Vite 來開啟你的Vue之 內牛滿面 的 完賽感言
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言