在Vue3和TypeScript中封装Axios，可以创建一个用于发送HTTP请求的服务，并使用axios的拦截器来处理通用的逻辑，如请求拦截、响应拦截、错误处理等。
以下是一个简单的封装示例：
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
class HttpService {
constructor() {
this.init();
}
private init() {
// 请求拦截
axios.interceptors.request.use(config => {
// 可以在这里添加例如token等请求头
return config;
}, error => {
// 请求错误处理
return Promise.reject(error);
});
// 响应拦截
axios.interceptors.response.use(response => {
// 可以在这里处理例如状态码等响应数据
return response;
}, error => {
// 响应错误处理
return Promise.reject(error);
});
}
public request(config: AxiosRequestConfig): Promise<AxiosResponse> {
return axios.request(config);
}
}
export default new HttpService();使用封装后的服务发送请求：
import http from './httpService';
interface User {
id: number;
name: string;
}
http.request<User>({
method: 'GET',
url: '/user'
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});在这个例子中，HttpService类封装了Axios，并设置了请求和响应的拦截器。通过request方法发送请求，可以直接使用类型参数指定期望的响应类型。这样可以在开发过程中更好地使用TypeScript的类型系统来保证类型安全。