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