Axios 搭配攔截器使用的時候，若其回傳值若要客製化新增 key，其 TypeScript 的解析直到 2024 年都沒有一個有效的解法。這邊筆記簡易自認可讓 TS 可以準確取得 key 的方式。
內容
1. 將專案的 axios 設定獨立成一支檔案，對專案其他部分僅暴露 service.request() 方法
2. 覆寫 service.request 的回傳值，傳入你客製化的 Response
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import axiosClient, { AxiosRequestConfig, AxiosResponse } from 'axios' // create an axios instance const service = axiosClient.create({ baseURL: `${process.env.BASE_DOMAIN}${process.env.BASE_API}`, timeout: 20000, headers: { 'Content-Type': 'application/json;charset=utf-8', }, }) // request interceptor service.interceptors.request.use( (config) => { if (!config.headers) { throw new Error("Expected 'config' and 'config.headers' not to be undefined") } return config }, (error) => { return Promise.reject(error) }, ) // response interceptor service.interceptors.response.use( (response: AxiosResponse) => { const finalResponse = { ...response, target: response?.data || {}, } return finalResponse }, (error) => { return Promise.reject({ ...error.response, }) }, ) interface IAxiosResponse<T> extends AxiosResponse { target: T } const axios = <T>(cfg: AxiosRequestConfig) => service.request<any, IAxiosResponse<T>>(cfg) export default axios |
3. 在專案中使用
|
1 2 3 4 |
const { target } = await request<string>({ url: 'breeds/image/random', method: 'get', }) |
參考資料
1. How to use Axios with TypeScript when using response interceptors (AxiosResponse issue)
2. Typescript – How to change type of axios response when modified interceptor to return config.data
