Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

第 12 屆 IT 鐵⼈賽 功能簡介

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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