Vue实战037：axios二次封装和使用

1、axios使用安装axios，进入项目文件夹打开cmd，输入，然后在main.js中全局引入axios，之后在组件中调用即安装axios，进入项目文件夹打开cmd，输入，然后在main.js中全局引入axios，之后在每个用到的组件中调用。

4、引入组件 在axios.js中引入相应的组件，qs模块，用来序列化post类型的数据，element-ui提示框组件用来弹出提示信息，store用来获取用户的token信息。

6、请求拦截顾名思义，就是在发送业务请求前进行阻拦，阻拦的目的是在数据发送前对数据进行一定逻辑的处理，比如统一添加token，当然前提是我们在登录的时候将token通过localStorage或者cookie存在本地并更新至store中，然后每次发送请求的时候就去store中提取对应的token赋给header，后台通过token来判断用户是否登录。

8、封装post、 get 、put 、delete方法 接下来我们可以来封装一些常用的请求方法，在项目中我们比较常用的方法有post、 get 、put 、delete，接下来我们对这几个方法进行二次封装，将url和header进行封装，这样在使用的时候我们只需要调用接口函数以及传入params即可。

9、封装get/delete方法定义一个get/del函数，传递有两个参数，参数1url地址，参数2携带的请求参数。然后返回一个promise对象，请求成功时resolve服务器返回 值，请求失败时reject错误。

11、抛出方法最后我们写个导出函数，将方法抛出去，这样其他组件就可以访问到我们封装的方法了，通过提交的方法来判断我们该调用哪个方法。

13、组件中使用现在我们就可以开心的使用封装的axios了，直接通过this.$axios()即可调用我们axios.js文件中的输出函数，然后通过method来判断调用哪个方法即可。