使用typescript封装axios
warning:
这篇文章距离上次修改已过203天,其中的内容可能已经有所变动。
在TypeScript中封装axios,可以创建一个封装了axios实例的类,并且可以添加自定义的配置和拦截器。以下是一个简单的示例:
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
class HttpClient {
private static instance: HttpClient;
private constructor() {}
public static getInstance(): HttpClient {
if (!this.instance) {
this.instance = new HttpClient();
}
return this.instance;
}
public request<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
const instance = axios.create({
baseURL: 'https://your-api-url.com',
// 其他默认配置
});
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
return instance(config);
}
}
// 使用方法
const httpClient = HttpClient.getInstance();
httpClient.request({ method: 'get', url: '/someEndpoint' });
在这个封装中,我们创建了一个单例的HttpClient
类,其中request
方法使用axios创建了一个新的实例,并且可以添加自定义的配置和拦截器。这样,我们就可以在项目中复用这个封装过的axios实例,并且可以方便地添加全局的请求或响应逻辑。
评论已关闭