vue全家桶 ---axios的使用和二次封装

一、前提基础

• 本文在vue项目搭建的基础上，vue-router路由配置的基础上，对vue项目中axios的使用进行介绍。

二、axios的使用以及拦截器的设置。

1. 安装axios

cnpm i axios -S
复制代码

2. 新建http文件夹，新建index.js,config.js文件
3. 在config.js对axios进行二次封装，进行请求拦截（主要用于配置token和请求数据类型）和响应拦截（主要用于http状态码和后端自定义的code码进行全局处理）。
4. 在index.js文件中导入config.js，并挂载在vue原型链上（也可挂载在vue的实例对象上,采用按需引用的方式可跳过）。
5. 在main.js中引入配置，若是所示：

   

6. 点击按钮获取菜单数据，这里使用express启动服务，封装菜单api接口来模拟实际场景。

   

7. 点击按钮，效果如图所示。

   

   

三、api集中管理与按需引用。

1. 对api的集中管理和按需引用有助于项目管理和重构，减轻vue实例的负担，优化项目性能。
2. 以前咱们使用是直接把封装好的axios直接挂载在vue的vue原型链上，而后在组件中经过this.$axios.get()的方式来使用，如今咱们稍微修改下。
3. 从main.js中删除require('./http')，修改http下index.js文件，修改home.vue中的接口引用。如图所示：

   

4. 如今咱们回到页面发现效果和原来同样。

四、总结

• 对axios的二次封装能够统一先后端交互的请求/响应数据类型，统一处理http错误码和自定义的code，避免在组件中频繁的判断，以及code码的使用混乱。
• 对api的集中管理和按需引用有助于项目管理和重构，代码的复用,实际项目开发时能够按模块对api进行划分，结构清晰。