vue2axios封装
时间: 2023-08-19 15:06:28 浏览: 42
在Vue2中使用axios进行网络请求的封装,可以方便地统一处理请求和响应,提高代码复用性和可维护性。以下是一个简单的示例:
1. 安装axios和vue-axios:
```bash
npm install axios vue-axios
```
2. 在main.js中引入并配置axios和vue-axios:
```javascript
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
```
3. 创建一个api.js文件,用于封装接口请求方法:
```javascript
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://api.example.com/', // 设置基本URL
timeout: 5000 // 设置请求超时时间
});
export const get = (url, params) => {
return apiClient.get(url, { params });
};
export const post = (url, data) => {
return apiClient.post(url, data);
};
```
4. 在组件中使用封装的接口请求方法:
```javascript
import { get, post } from '@/api';
export default {
methods: {
fetchData() {
get('/data').then(response => {
// 处理成功响应
console.log(response.data);
}).catch(error => {
// 处理错误响应
console.error(error);
});
},
submitData() {
const data = { /* 数据对象 */ };
post('/data', data).then(response => {
// 处理成功响应
console.log(response.data);
}).catch(error => {
// 处理错误响应
console.error(error);
});
}
}
};
```
这样,你就可以在Vue组件中方便地调用封装好的get和post方法进行网络请求了。注意,在实际项目中,你可能还需要处理loading状态、错误处理、请求拦截、响应拦截等功能,这些可以根据具体需求进行补充和扩展。