vue2 axios 封装
时间: 2023-10-09 19:13:32 浏览: 100
详解vue中axios请求的封装
在Vue2中封装axios可以按照以下步骤进行:
1. 首先,创建三个文件:api.js(存放接口列表)、http.js(封装axios)、config.js(axios的一些配置项)。
2. 在config.js文件中,可以设置一些基础的配置,例如baseURL、timeout和headers等。可以根据需求进行自定义添加。
3. 在http.js文件中,引入axios和config.js,然后使用axios.create()创建一个axios实例,并将config作为参数传入。
4. 在api.js文件中,引入axios实例和相关的接口列表,并导出封装好的接口。
5. 在main.js文件中,导入api.js,并将接口挂载到Vue原型上,以便在组件中可以直接通过this调用。
以下是一个示例代码:
```javascript
// config.js
const config = {
baseURL: 'http://192.168.110.250:3000',
timeout: 15000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
};
export default config;
// http.js
import axios from 'axios';
import config from './config';
const instance = axios.create(config);
export default instance;
// api.js
import http from './http';
const api = {
getUserInfo: () => http.get('/api/user'),
// 其他接口...
};
export default api;
// main.js
import Vue from 'vue';
import api from './api';
Vue.prototype.$api = api;
// 使用示例
this.$api.getUserInfo().then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
```
阅读全文