request类的封装
// request/index.ts
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { XYRequestInterceptors, XYRequestConfig } from './type'
class HYRequest {
instance: AxiosInstance
interceptors?: XYRequestInterceptors
constructor(config: XYRequestConfig) {
this.instance = axios.create(config)
this.interceptors = config.interceptors
//单独实例的拦截
this.instance.interceptors.request.use(
this.interceptors?.requestInterceptor,
this.interceptors?.requestInterceptorCatch
)
this.instance.interceptors.response.use(
this.interceptors?.responseInterceptor,
this.interceptors?.responseInterceptorCatch
)
//所有实例的拦截
this.instance.interceptors.request.use(
(config) => {
console.log('所有实例请求成功的拦截')
return config
},
(err) => {
console.log('所有实例请求失败的拦截')
return err
}
)
this.instance.interceptors.response.use(
(res) => {
console.log('所有实例响应成功的拦截')
return res.data
},
(err) => {
console.log('所有实例响应失败的拦截')
return err
}
)
}
request<T>(config: XYRequestConfig<T>): void {
//对单个请求的拦截
if (config.interceptors?.requestInterceptor) {
config = config.interceptors.requestInterceptor(config)
}
return new Promise<T>((resolve,reject)=>{
this.instance.request<any,T>(config).then((res) => { // res 是AxiosResponse类型,需要转为T类型
if (config.interceptors?.responseInterceptor) {
res = config.interceptors.responseInterceptor(res)
}
resolve(res)
})
})
}
}
export default HYRequest
import axios from "axios";
import type { AxiosInstance } from "axios";
import type { HYRequestConfig } from "./type";
class HYRequest {
instance: AxiosInstance;
constructor(config: HYRequestConfig) {
this.instance = axios.create(config);
// 全局接口实例
this.instance.interceptors.request.use(
(config) => {
console.log("全局请求成功拦截");
config.headers["token"] = "xxxx";
return config;
},
(error) => {
console.log("全局请求失败拦截");
return error;
}
);
this.instance.interceptors.request.use(
(res) => {
console.log("响应成功拦截");
return res.data;
},
(error) => {
console.log("响应失败拦截");
return error;
}
);
// 单个接口实例
this.instance.interceptors.request.use(
config.interceptors?.requestInterceptor,
config.interceptors?.requestInterceptorCatch
);
this.instance.interceptors.response.use(
config.interceptors?.responseInterceptor,
config.interceptors?.responseInterceptorCatch
);
}
request<T = any>(config: HYRequestConfig<T>) {
// 单次请求成功拦截
if (config.interceptors?.requestInterceptor) {
config = config.interceptors.requestInterceptor(config as any);
}
return new Promise((resolve, reject) => {
this.instance
.request<any, T>(config)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
});
}
get<T = any>(config: HYRequestConfig<T>) {
return this.request<T>({
...config,
method: "get"
});
}
post<T = any>(config: HYRequestConfig<T>) {
return this.request<T>({
...config,
method: "post"
});
}
delete<T = any>(config: HYRequestConfig<T>) {
return this.request<T>({
...config,
method: "delete"
});
}
put<T = any>(config: HYRequestConfig<T>) {
return this.request<T>({
...config,
method: "put"
});
}
}
export default HYRequest;
类型配置
import type {
AxiosRequestConfig,
AxiosResponse,
InternalAxiosRequestConfig
} from "axios";
export interface HYRequestInterceptors<T = AxiosResponse> {
requestInterceptor?: (
config: InternalAxiosRequestConfig
) => InternalAxiosRequestConfig;
requestInterceptorCatch?: (error: any) => any;
responseInterceptor?: (config: T) => T;
responseInterceptorCatch?: (error: any) => any;
}
export interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
interceptors?: HYRequestInterceptors<T>;
}
环境配置
// request/config.ts
let BASE_URL:string = ''
let TIME_OUT:number = 5000
if (process.env.NODE_ENV === 'development') {
BASE_URL = 'https://api.development'
} else if (process.env.NODE_ENV === 'production') {
BASE_URL = 'https://api.production'
} else if (process.env.NODE_ENV === 'releave') {
BASE_URL = 'https://api.releave'
}
export { BASE_URL,TIME_OUT }
实例化
import HYRequest from './request'
import { BASE_URL,TIME_OUT } from './request/config'
const HYRequest = new HYRequest({
baseURL: BASE_URL,
timeout: TIME_OUT,
interceptors: {
requestInterceptor: (config) => {
console.log('请求拦截成功')
return config
},
responseInterceptorCatch: (err) => {
console.log('请求拦截失败')
return err
},
responseInterceptor: (res) => {
console.log('响应拦截成功')
return res
},
requestInterceptorCatch: (err) => {
console.log('响应拦截失败')
return err
}
}
})
export default HYRequest
单独请求
import HYRequest from './service'
interface CityType {
data:any
list:array
...
}
HYRequest.request<CityType>({
url: '/city/all',
interceptors: {
requestInterceptor: (config) => {
console.log('/city/all请求的成功拦截')
return config
},
responseInterceptor: (res) => {
console.log('/city/all响应的失败拦截')
return res
}
}
}).then(res=>{
console.log(res)
})