在Vue中，可以通过创建一个axios实例并配置默认行为，然后再导出这个实例，以便在其他组件中使用。以下是一个简单的二次封装示例：
- 创建一个
http.js文件用于封装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 => {
// 可以在这里添加请求头等信息
// 例如：config.headers['Authorization'] = 'your token';
return config;
},
error => {
// 请求错误处理
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做处理，例如只返回data部分
const res = response.data;
// 根据返回的状态码做相应处理，例如401未授权等
return res;
},
error => {
// 响应错误处理
return Promise.reject(error);
}
);
export default service;- 在其他组件中使用封装后的axios实例发送请求。
import http from '@/path/to/http.js';
export default {
data() {
return {
// ...
};
},
methods: {
async fetchData() {
try {
const response = await http.get('/some-endpoint');
// 处理响应数据
console.log(response);
} catch (error) {
// 处理错误
console.error(error);
}
}
}
}这样，你就可以在Vue项目中方便地使用二次封装后的axios实例了。