学Ts也有一段时间了,虽然并没有特别难,但是在写的时候还是有很多不习惯的地方,然后想到了之前用js封装的axios,就想着用ts二次封装一下,也是百度了一些资料,才封装好。
为什么要二次封装
其实axios就挺好的,不封装也完全够用,而且axios里边也有拦截器的一些配置,但是进行二次封装的话更加方便的对接口进行管理,如果要换访问接口形式的话也更加方便修改
具体代码
import axios from "axios";
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
interface HYIntercepton<T = AxiosResponse> {
requsetSuccessFn?: (config: AxiosRequestConfig) => AxiosRequestConfig;
requsetFailureFn?: (err: any) => any;
responseSuccessFn?: (res: T) => T;
responseFailureFn?: (err: any) => any;
}
//这里可以添加自己的拦截器对其进行一个更加精细的控制
interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
interceptors?: HYIntercepton<T>;
}
class HYRequest {
// request实例=>axios的实例
instance: AxiosInstance;
constructor(config: HYRequestConfig) {
this.instance = axios.create(config);
// 每个实例都添加一个拦截器
// 发送拦截器
this.instance.interceptors.request.use(
(config) => {
// 全局请求成功的拦截
// config.headers.Authorization = "";
return config;
},
(err) => {
console.log("全局请求失败的拦截器");
return err;
}
);
// 响应拦截器
this.instance.interceptors.response.use(
(res) => {
console.log("全局响应成功的拦截");
// 这里返回的是res.data
return res.data;
},
(err) => {
console.log("全局响应失败的拦截");
return err;
}
);
// 针对特定的添加拦截器
this.instance.interceptors.request.use(
config.interceptors?.requsetSuccessFn,
config.interceptors?.requsetFailureFn
);
this.instance.interceptors.response.use(
config.interceptors?.responseSuccessFn,
config.interceptors?.responseFailureFn
);
}
// 封装网络请求的方法(这里传入一个泛型T可以对返回进行限制)
request<T = any>(config: HYRequestConfig<T>) {
// 单次请求的成功拦截处理
if (config.interceptors?.requsetSuccessFn) {
config = config.interceptors.requsetSuccessFn(config);
}
// 返回Promise
return new Promise<T>((resolve, reject) => {
this.instance
.request<any, T>(config)
.then((res) => {
/*
全局拦截器里边已经有了返回res.data
这里拿到的是后端返回的结果,并对其进行二次限制
*/
// 单次响应的成功拦截处理
if (config.interceptors?.responseSuccessFn) {
res = config.interceptors.responseSuccessFn(res);
}
resolve(res);
})
.catch((err) => {
reject(err);
});
});
}
//
get<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "GET" });
}
post<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "POST" });
}
delete<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "DELETE" });
}
patch<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "PATCH" });
}
}
export default HYRequest;
总结
这里的代码更多的都是看王老师的一个代码,不由得感慨大佬的思路,之后也要不断的练习ts,还有从这个封装中也学到了很多知识。