1.引入axios
2.创建一个实例
3.添加拦截器(请求拦截器,响应拦截器)
4.配置必传的参数
6.向外暴露
// 1.引入axios
import axios, { AxiosInstance } from "axios";
// 创建一个实例
class AxiosUtil {
private http: AxiosInstance;
//constructor构造函数 如果class被new了一个新的实例,会自动调用构造函数来做准备函数
constructor() {
this.http = axios.create({
baseURL: "http://127.0.0.1:5000",
timeout: 3000, //请求超时时间,请求时间超过则提醒请求超时
});
// 拦截器在实例一创建的时候就要调用
this.addInterceptors();
}
// axios拦截器
private addInterceptors() {
// 请求拦截
this.http.interceptors.request.use(
(config) => {
// 可以做一些操作,例如拦截添加token
return config;
},
(err) => {
return Promise.reject(err);
}
);
// 响应拦截器
this.http.interceptors.response.use(
(res) => {
// 处理请求回来的东西
return Promise.resolve(res);
},
(err) => {
return Promise.reject(err);
}
);
}
// 配置必传参数的方法
private request(method: string, url: string, data?: any) {
return this.http({
method,
url,
data: method == "post" ? data : "",
params: method == "get" ? data : "",
});
}
// 进一步配置几种请求方式
public post(url: string, data?: any) {
return this.request("post", url, data);
}
public get(url: string, data?: any) {
return this.request("get", url, data);
}
}
// 向外暴露 如果只想部分暴露,可以使用public和private
// 如果class被new了一个新的实例,会自动调用构造函数来做准备函数
const $http = new AxiosUtil();
export default $http;
