- 安装axios
cnpm i axios -S 复制代码
- 新建http文件夹,新建index.js,config.js文件
- 在config.js对axios进行二次封装,进行请求拦截(主要用于配置token和请求数据类型)和响应拦截(主要用于http状态码和后端自定义的code码进行全局处理)。
- 在index.js文件中导入config.js,并挂载在vue原型链上(也可挂载在vue的实例对象上,采用按需引用的方式可跳过)。
- 在main.js中引入配置,如果所示:
- 点击按钮获取菜单数据,这里使用express启动服务,封装菜单api接口来模拟实际场景。
- 点击按钮,效果如图所示。
3、api集中管理与按需引用。
- 对api的集中管理和按需引用有助于项目管理和重构,减轻vue实例的负担,优化项目性能。
- 之前我们使用是直接把封装好的axios直接挂载在vue的vue原型链上,然后在组件中通过this.$axios.get()的方式来使用,现在我们稍微修改下。
- 从main.js中删除require('./http'),修改http下index.js文件,修改home.vue中的接口引用。如图所示:
- 现在我们回到页面发现效果和原来一样。
4、总结
- 对axios的二次封装可以统一前后端交互的请求/响应数据类型,统一处理http错误码和自定义的code,避免在组件中频繁的判断,以及code码的使用混乱。
- 对api的集中管理和按需引用有助于项目管理和重构,代码的复用,实际项目开发时可以按模块对api进行划分,结构清晰。
以上所述就是小编给大家介绍的《vue全家桶 ---axios的使用和二次封装》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- vue全家桶
- 升级vue全家桶过程记录
- SpringBootBucket 1.0.0 发布,SprintBoot全家桶
- 免费获取 JetBrains 全家桶正版 License 教程
- 使用React全家桶搭建一个后台管理系统
- Windows 10四月更新恢复预装“全家桶”遭吐槽
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据库系统概念
(美)Abraham Silberschatz、(美)Henry F.Korth、(美)S.Sudarshan / 杨冬青、李红燕、唐世渭 / 机械工业出版社 / 2012-3 / 99.00元
【编辑推荐】 数据库领域的殿堂级作品 夯实数据库理论基础,增强数据库技术内功的必备之选 对深入理解数据库,深入研究数据库,深入操作数据库都具有极强的指导作用! 【内容简介】 本书是数据库系统方面的经典教材之一,其内容由浅入深,既包含数据库系统基本概念,又反映数据库技术新进展。它被国际上许多著名大学所采用,包括斯坦福大学、耶鲁大学、得克萨斯大学、康奈尔大学、伊利诺伊大学......一起来看看 《数据库系统概念》 这本书的介绍吧!