vue如何进行axios封装
时间: 2024-05-30 16:05:01 浏览: 153
vue+ts下对axios的封装实现
在Vue中进行axios封装可以提高代码的可维护性和复用性。下面是一种常见的axios封装方式:
1. 首先,安装axios库。可以使用npm或者yarn命令进行安装:
```
npm install axios
```
2. 创建一个api.js文件,用于封装axios请求。
```javascript
import axios from 'axios';
// 创建一个axios实例
const service = axios.create({
baseURL: 'http://api.example.com', // 设置请求的baseURL
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;
```
3. 在需要发送请求的地方引入api.js文件,并使用封装好的axios实例发送请求。
```javascript
import request from './api.js';
// 发送GET请求
request.get('/user/info', { params: { id: 1 } })
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
// 发送POST请求
request.post('/user/login', { username: 'admin', password: '123456' })
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
```
这样,你就完成了Vue中axios的封装。通过这种方式,你可以在项目中统一处理请求的配置、拦截器等,提高代码的可维护性和复用性。
阅读全文