前言
作为一名一入坑就使用java的猿子,本着万物皆可对象的原则,研究出如何将axios封装成更简单实用的“对象”。
之前本猿子就非常讨厌ajax又臭又长的执行函数,和其他地方整齐的代码一比较,感觉low爆了,所以有了下面滴故事。。。
栗子
使用过vue的猿子都知道它的兼容性非常好,我们可以将很多第三方插件或者自己的方法注册到vue中,就像之前说的它就像一个脚手架!
首先我们需要在项目中安装axios:
npm install axios
在main.js中引入:
import axios from 'axios';
注册:
Vue.prototype.axios = axios;
开始封装:
/**
* 封装请求方法
* @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;
看到baseurl大家基本上就明白了,可以通过设置axios的属性将服务器地址预设进去!
那么window.config.Host又是啥玩意呢?
<script>
window.config = {
Host: 'http://127.0.0.1:7001/helloWorld/'
};
</script>
大家都知道,如果我们将公共路径放入vuex中进行保存的话,一旦打包完成路径就没法修改了,因为在打包过程中你的路径已经被编译了!我们将打完的前端工程包交给实施自然不希望他们再来打扰我们,所以我们将公共路径设置放在index.html的js中,因为html页面是不会被编译的,需要修改的时候只需要用 马赛克++ 打开修改一下就可以了!