Great Axios Pattern with TypeScript

Jayson Chiang
Jun 12, 2021

--

最基本的 axios 用法,設定一個baseURL

就可以輕易用 api.getData() 呼叫 api

現在針對錯誤訊息再多一點點改善

微調了一下,讓 api 有2個方法可以操作,其中 api.details() 如果放了錯誤的參數,就會跳到 error 並有 對應的 handler接它。而因為 error handler 應該要共用,所以寫在 axios.interceptors.response.use() 裡.

接著是抽離 requestresponse 讓 api 有更多的彈性和擴充空間,例如有更多組 api 的時侯,就可以更方的分類。

並且也使用 axios.interceptors.request.use 在每支api 發送request之前帶入 token

例如以上的程式,就可用
api.todos.create({ title: 'test' })
api.users.list()

最後就是改寫成 TypeScript啦

--

--

No responses yet