TypeScript实战之用TS封装Axios

最新推荐文章于 2024-09-06 10:13:12 发布

东方睡衣

最新推荐文章于 2024-09-06 10:13:12 发布

阅读量670

点赞数 1

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/web2022050903/article/details/126404138

版权

本文详细介绍了如何使用TypeScript封装Axios，包括Axios的常用类型解析、基础封装、拦截器封装以及常用方法的封装，通过实例代码展示了如何在实际项目中提升开发效率和代码质量。

摘要由CSDN通过智能技术生成

简介

这是TypeScript实战的第三篇文章。前面两篇笔者分别介绍了在Vuex和Pinia中怎么使用TypeScript以及Vuex和Pinia的区别。今天我们再用TypeScript封装一遍Axios。希望能进一步巩固TypeScript的基础知识。

Axios几个常用类型

在使用TypeScript封装Axios之前我们先来看看Axios几个重要的类型。

AxiosRequestConfig

AxiosRequestConfig是我们使用axios发送请求传递参数的类型。当然它也是我们请求拦截器里面的参数类型。

axios(config: AxiosRequestConfig)

可以看到，这个config里面的参数还是挺多的。我们常用的有url、method、params、data、headers、baseURL、timeout。

export interface AxiosRequestConfig {url?: string;method?: Method;baseURL?: string;transformRequest?: AxiosTransformer | AxiosTransformer[];transformResponse?: AxiosTransformer | AxiosTransformer[];headers?: any;params?: any;paramsSerializer?: (params: any) => string;data?: any;timeout?: number;timeoutErrorMessage?: string;withCredentials?: boolean;adapter?: AxiosAdapter;auth?: AxiosBasicCredentials;responseType?: ResponseType;xsrfCookieName?: string;xsrfHeaderName?: string;onUploadProgress?: (progressEvent: any) => void;onDownloadProgress?: (progressEvent: any) => void;maxContentLength?: number;validateStatus?: ((status: number) => boolean) | null;maxBodyLength?: number;maxRedirects?: number;socketPath?: string | null;httpAgent?: any;httpsAgent?: any;proxy?: AxiosProxyConfig | false;cancelToken?: CancelToken;decompress?: boolean;transitional?: TransitionalOptions
}

AxiosInstance

AxiosInstance是我们使用axios实例对象类型。

我们使用axios.create(config?: AxiosRequestConfig)创建出来的对象都是AxiosInstance类型

export interface AxiosInstance {(config: AxiosRequestConfig): AxiosPromise;(url: string, config?: AxiosRequestConfig): AxiosPromise;defaults: AxiosRequestConfig;interceptors: {request: AxiosInterceptorManager<AxiosRequestConfig>;response: AxiosInterceptorManager<AxiosResponse>;};getUri(config?: AxiosRequestConfig): string;request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;delete<T = any, R = AxiosResponse<T>>(u