vue中封装axios在哪个文件封装
时间: 2024-09-10 14:23:49 浏览: 33
在Vue项目中,通常我们会把axios的配置和请求封装在一个单独的模块或者文件中,以便于管理和复用。这样可以提高代码组织性和减少全局污染。以下是一个常见的做法:
1. 创建一个名为`api.js`或`http.js`的文件,在`src`目录下的`utils`或者`services`子目录下,这两个地方都是用于存放辅助函数或模块的地方。
```js
// api.js 或 http.js
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_API_URL, // API 的基础 URL
timeout: 5000, // 请求超时时间
headers: {
'Content-Type': 'application/json', // 默认请求头
},
});
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
error => {
// 对请求错误做些什么
console.log(error);
Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
// 对响应数据做处理
return response.data;
},
error => {
// 对响应错误做处理
console.error('An error occurred', error); // for example
Promise.reject(error);
}
);
export default service; // 导出服务实例供其他部分导入
```
然后在需要使用的地方导入并使用这个封装好的axios实例:
```js
// 在某个组件或者util文件中
import axios from '@/utils/api';
```
这样,你在整个项目中只需要关注如何使用这个`service`对象发起API请求即可。