今天要來介紹一下Vue3之中一個很有趣的新功能Suspense。
我們很常在串接 API 的時候會因為要等 API 的資料回來而製作一個 Loading 的元件以及新增一個狀態來控制它的開關，但是當你的網站一大起來的時候你要製作的 Loading 也會開始變多，不只是全域 Loading，甚至連其他小元件也會開始變多，這樣一來你要新增跟管理的狀態會慢慢開始分散，這個時候我們就可以透過 Suspense 來避免過多的狀態以及可以更好管理我們的Loading 的元件。
首先我們先來看負責處理 API 的非同步組件
首先我用了 axios 來打 API，然後使用 async/ await 的方式來處理執行緒的部分，讓我的資料可以拿到之後在回傳到 template 上面。
再來在它的父層元件上面新增一個 Suspense 的元件裡面用兩個 template 元件包起來，這兩個 template 元件是 slot 的元件，id 分別是 default 跟 fallback，這兩個 slot 的元件極為重要。
首先 #default 這個組件，會當你需要載入的內容都處理好後顯示該 slot 內容，然而當你還在載入的時候它就只會顯示 #fallback 裡面的內容直到你 #default 載入完成後才會消失，所以我在 #fallback 裡面放入的 loading 的元件，loading的元件其實很簡單我就不另外列出來了。
你看我並沒有寫任何的狀態去切換 laoding 的出現跟消失，反而是透過Suspense 來幫我處理狀態的切換，所以未來只要使用非同步的元件在做loading處理的時候就可以採用這種方式來管理，可以減少你的要處理的狀態，以及好去擴充不同的 UI 內容，是不是非常棒呢。
你可能會問，那當API發生錯誤時候該如何處理呢？
我們可以使用 onErrorCaptured 這個新的生命週期函式來攔截我們 Suspense 裡面的錯誤。
只要你的 Suspense 內部的元件 API 發生錯誤，error 就會被回傳。
完整的範例我放到 codesandbox 裡面，有興趣的朋友可以玩玩看！
個人蠻喜歡這個功能的，這個功能就像我前面說的可以更方便的去管理我元件的非同步處理以及 loading 的狀態切換，只是在 Vue3 裡面除了 Suspense 以外，也是可以利用 Composition API 去做非同步的處理來解決狀態切換的問題，至於怎麼做我之後會再寫一篇文章給各位朋友知道
最後
我有開設一個youtube的頻道，不定時晚上直播跟技術或是經驗相關的分享，有興趣的朋友歡迎追蹤訂閱＋小鈴鐺。
工商時間
線上課程 — 職人必修的 RWD 網頁入門班
線上課程 — 現代 JavaScript 職人之路｜入門篇
線上課程 — 現代 JavaScript 職人之路｜中階實戰篇
線上課程 — HTML5+Animate CC 無痛上手網頁動畫與遊戲互動
線上課程 — 2020 Vue 3 專業職人完全組合包
