vue2 axios 封装

在Vue2中封装axios可以按照以下步骤进行：

首先，创建三个文件：api.js（存放接口列表）、http.js（封装axios）、config.js（axios的一些配置项）。

在config.js文件中，可以设置一些基础的配置，例如baseURL、timeout和headers等。可以根据需求进行自定义添加。

在http.js文件中，引入axios和config.js，然后使用axios.create()创建一个axios实例，并将config作为参数传入。

在api.js文件中，引入axios实例和相关的接口列表，并导出封装好的接口。

在main.js文件中，导入api.js，并将接口挂载到Vue原型上，以便在组件中可以直接通过this调用。

以下是一个示例代码：
// 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);
});
登录后复制