建立 api 通用機制 Build General API Development Mechanism8. 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
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
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
29. 全自動化的 api 介接機制
• 這樣當需求規格有異動
• 只要後端 API Model變更完
(API邏輯還不用實作)
• 使用 ApiHandler cli 指令
就能自動產出 client ts 檔
29
規格異動
後端調整 api
自動化產生 ts
code
前端
根據自動化 ts
code 進行調整