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啦

--

--