Axios的typescript封装
ts
1import axios, { 2 AxiosInstance, 3 AxiosRequestConfig, 4 AxiosResponse, 5 AxiosError, 6} from "axios"; 7import qs from "qs"; 8 9// 后端返回的数据类型 10type ResponseData<T> = { 11 code: number; 12 data: T; 13 message: string; 14}; 15// 创建axios实例 16const axiosInstance: AxiosInstance = axios.create({ 17 timeout: 60000, 18}); 19 20// 异常拦截处理器 21const errorHandler = (error: AxiosError) => { 22 if (error.response) { 23 switch (error.response.status) { 24 case 401: 25 // 登录过期错误处理 26 break; 27 case 500: 28 // 服务器错误处理 29 break; 30 default: 31 } 32 } 33 return Promise.reject(error); 34}; 35// 请求拦截处理器 36axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => { 37 // qs是axios自带的序列化参数方式 38 if ( 39 config.headers && 40 config.headers["Content-Type"] && 41 (config.headers["Content-Type"] as string).includes( 42 "application/x-www-form-urlencoded" 43 ) 44 ) { 45 config.params = qs.stringify(config.params); 46 } 47 return config; 48}, errorHandler); 49// 响应拦截处理器 50axiosInstance.interceptors.response.use((response: AxiosResponse) => { 51 return response.data; 52}, errorHandler); 53 54export function request<T>(config: AxiosRequestConfig<T>): Promise<T> { 55 return new Promise((resolve, reject) => { 56 axiosInstance 57 .request<T, AxiosResponse<ResponseData<T>>>(config) 58 .then((result: AxiosResponse<ResponseData<T>>) => { 59 const { data } = result; 60 if (data.code === 0) { 61 resolve(data.data); 62 } else { 63 reject(data); 64 } 65 }) 66 .catch((err: AxiosError) => { 67 reject(err); 68 }); 69 }); 70} 71
阅读量:1776发布日期:2022-05-28 12:52:55
博客描述
Axios的typescript封装