Day12: API 處理與畫面互動

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

◼︎ 本集內容：API 處理與畫面互動

從第 12 天開始會進入 UI 實戰應用，實戰篇會搭配各種 Svelte 功能來實作各種前端 UI，並盡量以實際場景為主，因此功能上也會比較複雜一些。

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day12 - UI 實戰篇：API 處理與畫⾯互動
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   實作 API 需要考量的事
   狀態處理（正常狀態、載入中、失敗、成功）
   在元件裡頭呼叫，或是在其他地⽅處理
   若 API 的結果或狀態會共⽤ → 可使⽤ store 管理
   簡單的 API 呼叫與控制 → 可使⽤ await 語法
   畫⾯上要如何呈現
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   範例
   Github API 搭配 store 實作 UI
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   功能簡介
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   功能簡介
   初次載入時，以 react 為預設值
   在 API 尚未載入時，在畫⾯上顯⽰ Loading ⽂字
   進階：更好的視覺呈現
   在 API 載入完成後，以 fadein 顯⽰列表
   切換標籤時，重新呼叫 API 並清除先前列表
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   特定場景處理
   若使⽤者在 API 載入完成前切換標籤，取消前⼀次的請求
   如果 API 發⽣錯誤，顯⽰錯誤訊息
   進階：根據 error code, status code 顯⽰錯誤訊息
   

   View Slide