前言
作为一名一入坑就使用java的猿子，本着万物皆可对象的原则，研究出如何将axios封装成更简单实用的“对象”。
之前本猿子就非常讨厌ajax又臭又长的执行函数，和其他地方整齐的代码一比较，感觉low爆了，所以有了下面滴故事。。。
栗子
使用过vue的猿子都知道它的兼容性非常好，我们可以将很多第三方插件或者自己的方法注册到vue中，就像之前说的它就像一个脚手架！
首先我们需要在项目中安装axios：
npm install axios
1
在main.js中引入：
import axios from 'axios';
1
注册：
Vue.prototype.axios = axios;
1
开始封装：
/** * 封装请求方法 * @param me 传入this，以便获取vuex中的对象，token是我们需要向后端传递的秘钥进行身份验证 * @param url 传入需要访问的地址 * @param data 传入需要发送的数据，headers根据个人的需求进行修改 */ Vue.prototype.request = (me, url, data) => { let token = `?token=${me.$store.state.token}`; let headers = { "X-Requested-With": "XMLHttpRequest" }; return axios({ method: 'post', url: url + token, headers, data, }) .then(res => { //返回函数这里，根据自己封装的返回对象进行解析 if (res.data.code == 0) { return res.data.data; }else if(res.data.code == 1){ me.errAlert(res.data.msg); } }) .catch((err) => { me.errAlert("连接错误"); console.log('***request error' + err); }); };
此时需要调用验证一下：
var param = { 'username': 'wx', 'password': '123456' } this.request(this, 'public/login', param) .then(res => { if (res != null) { //逻辑判断。。。。 } }) .catch(err => console.log('request error => ' + err));
通过以上操作，我们成功地将axios封装起来，代码行数大大减少，也变得更加整齐了！
but。。。
请求地址404
请看这里！！！
我只传递了方法路径，并没有服务器地址，那么怎么样才能做到只传方法路径就可以访问到服务呢？
请看这里！！！
axios.defaults.baseURL = window.config.Host;
1
看到baseurl大家基本上就明白了，可以通过设置axios的属性将服务器地址预设进去！
那么window.config.Host又是啥玩意呢？
<script> window.config = { Host: 'http://127.0.0.1:7001/helloWorld/' }; </script>
大家都知道，如果我们将公共路径放入vuex中进行保存的话，一旦打包完成路径就没法修改了，因为在打包过程中你的路径已经被编译了！我们将打完的前端工程包交给实施自然不希望他们再来打扰我们，所以我们将公共路径设置放在index.html的js中，因为html页面是不会被编译的，需要修改的时候只需要用 马赛克++ 打开修改一下就可以了！
完美！撒花！
