爱站程序员基地首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.js里，项目机构如图：
1. axios统一封装
然后开始统一封装axios， 首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，比如调接口的时候，显示loading等。这个main.js根据你个人情况，可加可不加。
//request.jsimport axios from \"axios\";import qs from \"qs\";import app from \"../main.js\";
然后创建一个axios实例，这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置：
/****** 创建axios实例 ******/const service = axios.create({baseURL: process.env.BASE_URL, // api的base_urltimeout: 5000 // 请求超时时间});
axios实例创建好之后，开始使用request拦截器对axios请求配置做统一处理，具体如下：
/****** request拦截器==>对请求参数做处理 ******/service.interceptors.request.use(config => {app.$vux.loading.show({text: \'数据加载中……\'});config.method === \'post\'? config.data = qs.stringify({...config.data}): config.params = {...config.params};config.headers[\'Content-Type\'] = \'application/x-www-form-urlencoded\';return config;}, error => { //请求错误处理app.$vux.toast.show({type: \'warn\',text: error});Promise.reject(error)});
然后是对response做统一处理，代码如下：
/****** respone拦截器==>对响应做处理 ******/service.interceptors.response.use(response => { //成功请求到数据app.$vux.loading.hide();//这里根据后端提供的数据进行对应的处理if (response.data.result === \'TRUE\') {return response.data;} else {app.$vux.toast.show({ //常规错误处理type: \'warn\',text: response.data.data.msg});}},error => { //响应错误处理console.log(\'error\');console.log(error);console.log(JSON.stringify(error));let text = JSON.parse(JSON.stringify(error)).response.status === 404? \'404\': \'网络异常，请重试\';app.$vux.toast.show({type: \'warn\',text: text});return Promise.reject(error)});
最后，将我们的axios实例暴露出去，整个axios的封装就写完了。
export default service;
2. axios接口的调用方式
axios封装好之后，调用就很简单了。我们把接口统一写在api.js文件里。（当然，如果你的业务非常复杂的话，建议把不同业务的api分开放到不同的文件里，这样方便以后维护）。
注意：post请求参数放在data里面，get请求参数放在params里。
//api.jsimport service from \'./request\'export const getPersonInfo = data => {return service({url: \'/person_pay/getpersoninfo\',method: \'post\',data})};
然后在具体的组件中进行调用。
//index.vueimport {getPersonInfo} from \'../axios/api.js\'export default {created: async function () {const params = {card_no: \'111\'};let res = await getPersonInfo(params);console.log(res);}}
