带你玩转vue——高效封装axios

2022-04-09 21:44:55

前言

作为一名一入坑就使用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页面是不会被编译的，需要修改的时候只需要用马赛克++ 打开修改一下就可以了！

完美！撒花！

码农公寓

前言

栗子

相关文章