1, 前提基础
本文在 vue 项目搭建的基础上, vue-router 路由配置的基础上, 对 vue 项目中 axios 的使用进行介绍.
2,axios 的使用以及拦截器的设置.
安装 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 进行划分, 结构清晰.
来源: https://juejin.im/post/5c271979f265da61590bc078