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

10,249 阅读2分钟

1、前提基础

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

  1. 安装axios
cnpm i axios -S
  1. 新建http文件夹,新建index.js,config.js文件
  2. 在config.js对axios进行二次封装,进行请求拦截(主要用于配置token和请求数据类型)和响应拦截(主要用于http状态码和后端自定义的code码进行全局处理)。
  3. 在index.js文件中导入config.js,并挂载在vue原型链上(也可挂载在vue的实例对象上,采用按需引用的方式可跳过)。
  4. 在main.js中引入配置,如果所示:
  5. 点击按钮获取菜单数据,这里使用express启动服务,封装菜单api接口来模拟实际场景。
  6. 点击按钮,效果如图所示。

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

  1. 对api的集中管理和按需引用有助于项目管理和重构,减轻vue实例的负担,优化项目性能。
  2. 之前我们使用是直接把封装好的axios直接挂载在vue的vue原型链上,然后在组件中通过this.$axios.get()的方式来使用,现在我们稍微修改下。
  3. 从main.js中删除require('./http'),修改http下index.js文件,修改home.vue中的接口引用。如图所示:
  4. 现在我们回到页面发现效果和原来一样。

4、总结

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