Recommandé
Contenu connexe
En vedette
En vedette (20)
建立 api 通用機制 Build General API Development Mechanism
- 2. 可能的原生做法 • 後端開 api • 前端根據 api 規格介接，包含 • 介接程式碼 • Model 定義 • UI 顯示 loading • 表單驗證 • … 2
- 3. 如果因為什麼原因，導致要改規格 • 後端開 api • 前端根據 api 規格介接，包含 • 介接程式碼 • Model 定義 • UI 顯示 loading • 表單驗證 • … 3
- 4. 如果有幾百隻 API 需要介接 甚至還可能規格異動…. • 後端開 api • 前端根據 api 規格介接，包含 • 介接程式碼 • Model 定義 • UI 顯示 loading • 表單驗證 • … 4
- 5. 如果每隻 API 還有各式想不到的 Exception 要做 Error Handling… 5
- 6. 6
- 8. DRY & KISS • Don't Repeat Yourself! • Keep it Simple and Stupid! 8
- 9. 建立 ApiHandler • 讓開發時 • 專注在商業邏輯、資料的交換 • 而不是實作介接 • 當規格快速變動時 • 可以快速重新組織程式 • 通用的機制 • 用設定代替撰寫邏輯 • 設定一次，後續沿用 規格異動 後端調整 api 自動化產生 ts code 前端 根據自動化 ts code 進行調整 9
- 10. 定義 ApiHandler 發送 API 之 lifecycle • 將 API 的發送過程，用 Promise 的方式切 lifecycle • Hook Lifecycle: 客製化特定 lifecycle 固定要做什麼 *Success *Error *Finally Send Request Receive Response * Hookable lifecycle *Init 10
- 11. Hook Lifecycle 以 Vuetify Button loading 為例 const isLoading = ref(false) *Success *Error *Finally Send Request Receive Response *Init Click isLoading.value = true isLoading.value = false Button 變淡 顯示 loading icon 1 2 3 4 5 6 7 8 9 10 <v- btn :loading=“isLoading” @click=“RunApi” /> 11
- 12. Hook Handler • 預先定義好 Hook 行為 • 藉由組合 Hook Handler 來快速設定 ApiHandler 的功能 • 像是 isLoading Hook Provider • 然後再用 Hooks Provider 組織想使用的 Hook *Success *Error *Finally Send Request Receive Response *Init isLoading.value = true isLoading.value = false 12
- 13. 更多的 Hook Handler > Server Wakeup • Server 若有閒置睡眠的機制，可能導致 API 的 timeout 不如預 期 • 如果 • API 設定 30 秒 timeout • Server 起床要花 25 秒 • API Response 要 10 秒 • 那 API 可能會因為要等 Server 起床而 timeout Run API 0 2 5 3 5 3 0 Server Wakeup Timeout Server Process API 13
- 14. 更多的 Hook Handler > Server Wakeup • 在真的發 API 前 • 先 Ping Server • 確保 Server 是醒著的之後 • 紀錄30分鐘內不再 Ping Server • 真的發 API *Success *Error *Finally Send Request Receive Response *Init Ping Receive Response 14
- 15. 更多的 Hook Handler > Server Wakeup • 若有多個 API 同時發送 • 則將每個 API 都 Pending • 直到確保 Server 是醒著的 • 再 async 去發 API *Init Ping Receive Response API 1 API 2 … 15
- 16. 更多的 Hook Handler > Response 後續處理 • Success Response sync 若 API 為 200，”response”變數會 自動初始化 *Success *Error *Finally Send Request Receive Response *Init 16
- 17. 更多的 Hook Handler > Response 後續處理 • 401, 403 Toast 請進行登入，權限不足... • 甚至 401 直接跳登入框 若 API 為 401，Toast 對應 msg 17
- 18. 更多的 Hook Handler > Response 後續處理 • 400 表單驗證 with vuetify *Success *Error *Finally Send Request Receive Response *Init 18
- 19. 更多的 Hook Handler > Abort API • 像是觸發登出後，將登出前正在執行的 API 強制中斷 • HTTP/1.X 一個網域只能並行6條連線 • 若登出前同時呼叫 6 隻要跑比較久的 API • 則登出後若有 API/Resources/… 需要呼叫 • 那就會必須等登出前的 API 跑完才能被執行 登出時，可以呼叫 Abort 來 release 連 線 19
- 20. 建立 ApiFactory 20 自動產的 class 自動產的 class 在 Init Hook 裏頭，用 HooksProvider，來封裝設定 Hook
- 21. 用 Hooks Provider 輔助設定 Hook • 使用多個 Hook 時，要留意執行順序 • 因此預先定義 Hooks Provider，來定義 • 要使用哪些 Hook • Hook 的執行順序 • AuthApiHooksProvider 封裝的 Hook Handler 有 • IsLoading • RequestValidation • ResponseSync • AbortApi • WakeUpServer • Toast • ErrorTaskDefault • … 21
- 22. 全自動化的 api 介接機制 • 假如後端寫了一個發 mail 的 Api • 定義 1. Request Model 2. Response Model 3. Api Response Type 1 2 3 22
- 23. 全自動化的 api 介接機制 • 利用 Swagger 機制 23
- 24. 全自動化的 api 介接機制 • 在 VS Build(F5) 的時候輸出 swagger.json • Swagger.json 內含 api 的詳細資訊，像是 • url • Request Model • Response Model • Http Method • … 24
- 25. 全自動化的 api 介接機制 • 藉由 watch swagger.json 的異動 • 解析異動，並用 ApiHandler 的 cli 指令來產生 client.ts 25
- 26. 全自動化的 api 介接機制 • 自動產的 client.ts 會實作好 ApiFactory，含所有的 Api 的 • Request Model • Response Model • Api 註解 • Http Method • … • 並套用好 Hook 設定 26
- 27. 全自動化的 api 介接機制 • 可以直接從 apiFactory 呼叫新產生的 api • Api • return Promise • 強型別 • 直接套用設定好的 Hook 27
- 28. 全自動化的 api 介接機制 • 自動產生好 • Model、註解、enum… 28
- 29. 全自動化的 api 介接機制 • 這樣當需求規格有異動 • 只要後端 API Model變更完 (API邏輯還不用實作) • 使用 ApiHandler cli 指令 就能自動產出 client ts 檔 29 規格異動 後端調整 api 自動化產生 ts code 前端 根據自動化 ts code 進行調整
- 31. 31
- 33. 感謝您的聆聽 33