vue2项目中axios的封装
时间: 2023-09-03 14:13:40 浏览: 40
在Vue2项目中,可以使用以下步骤来封装axios:
1. 安装axios:在项目的根目录下打开终端,运行以下命令安装axios。
```
npm install axios
```
2. 创建一个api目录:在src目录下创建一个名为api的文件夹。
3. 在api目录下创建一个request.js文件:这个文件将用于封装axios的请求方法。
```javascript
import axios from 'axios';
// 创建一个axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL, // 设置接口的基础url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 可以在发送请求之前做一些处理,例如添加token等
return config;
},
error => {
// 处理请求错误
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 可以在这里对响应数据进行处理
return response.data;
},
error => {
// 处理响应错误
console.log(error);
return Promise.reject(error);
}
);
export default service;
```
4. 在需要发送请求的地方引入封装好的axios实例:
```javascript
import request from '@/api/request.js';
// 发送GET请求
request.get('/api/users')
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
// 发送POST请求
request.post('/api/login', { username: 'admin', password: '123456' })
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
```
这样,你就成功封装了axios,并可以在项目中方便地使用了。你可以根据需要在request.js文件中添加更多的请求方法,例如put、delete等。