这是TypeScript实战的第三篇文章。前面两篇笔者分别介绍了在Vuex和Pinia中怎么使用TypeScript以及Vuex和Pinia的区别。今天我们再用TypeScript封装一遍Axios。希望能进一步巩固TypeScript的基础知识。
在使用TypeScript封装Axios之前我们先来看看Axios几个重要的类型。
AxiosRequestConfig是我们使用axios发送请求传递参数的类型。当然它也是我们请求拦截器里面的参数类型。
axios(config: AxiosRequestConfig)
可以看到，这个config里面的参数还是挺多的。我们常用的有url、method、params、data、headers、baseURL、timeout。
export interface AxiosRequestConfig {// `url` 是用于请求的服务器 URLurl?: string;// `method` 是创建请求时使用的方法method?: Method;// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLbaseURL?: string;// `transformRequest` 允许在向服务器发送前，修改请求数据// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 StreamtransformRequest?: AxiosTransformer | AxiosTransformer[];// `transformResponse` 在传递给 then/catch 前，允许修改响应数据transformResponse?: AxiosTransformer | AxiosTransformer[];// `headers` 是即将被发送的自定义请求头headers?: any;// `params` 是即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plain object)或 URLSearchParams 对象params?: any;// `paramsSerializer` 是一个负责 `params` 序列化的函数paramsSerializer?: (params: any) => string;// `data` 是作为请求主体被发送的数据// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'// 在没有设置 `transformRequest` 时，必须是以下类型之一：// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - 浏览器专属：FormData, File, Blob// - Node 专属： Streamdata?: any;// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)// 如果请求话费了超过 `timeout` 的时间，请求将被中断timeout?: number;// 超时提示消息timeoutErrorMessage?: string;// `withCredentials` 表示跨域请求时是否需要使用凭证withCredentials?: boolean;// `adapter` 允许自定义处理请求，以使测试更轻松adapter?: AxiosAdapter;// `auth` 表示应该使用 HTTP 基础验证，并提供凭据auth?: AxiosBasicCredentials;// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'responseType?: ResponseType;// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称xsrfCookieName?: string;// `xsrfHeaderName` 是携带 xsrf 令牌值的 http 标头的名称xsrfHeaderName?: string;// `onUploadProgress` 允许为上传处理进度事件onUploadProgress?: (progressEvent: any) => void;// `onDownloadProgress` 允许为下载处理进度事件onDownloadProgress?: (progressEvent: any) => void;// `maxContentLength` 定义允许的响应内容的最大尺寸maxContentLength?: number;// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 rejectpromise 。// 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，// promise 将被 resolve; 否则，promise 将被 rejectevalidateStatus?: ((status: number) => b