在Vue3和TypeScript中，你可以创建一个二次封装axios的例子如下：
首先，安装axios:
npm install axios然后，创建一个http.ts文件用于封装axios：
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 可以在这里添加请求头等信息
return config;
},
error => {
// 请求错误处理
console.log(error); // for debug
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做处理，例如只返回data部分
const res = response.data;
// 如果有错误码，则进行错误处理
return res;
},
error => {
// 响应错误处理
console.log('err' + error); // for debug
return Promise.reject(error);
}
);
export default service;最后，你可以在组件中使用封装后的axios：
import http from '@/path/to/http';
export default defineComponent({
name: 'MyComponent',
setup() {
const fetchData = async () => {
try {
const response = await http.get('/some-endpoint');
console.log(response);
} catch (error) {
console.error(error);
}
};
// 在mounted钩子中调用
onMounted(() => {
fetchData();
});
}
});这样，你就完成了axios的二次封装，并在Vue组件中使用了封装后的请求方法。