Vue二次封装axios为插件使用

原创 前端女神 随笔 vue 17112阅读 15 天前 举报

vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说:
基本的封装要求:

  • 统一 url 配置
  • 统一 api 请求
  • request (请求)拦截器,例如:带上token等,设置请求头
  • response (响应)拦截器,例如:统一错误处理,页面重定向等
  • 根据需要,结合 Vuex 做全局的loading动画,或者错误处理
  • 将 axios 封装成 Vue 插件使用

文件结构
使用 vue-cli 进行相关的封装,在 src 文件夹下:

config.js
默认配置参照 gitHub,以下只做示例:

api.js

interface.js

index.js
封装成 Vue 插件,便(提)于(高)使(B)用(格)

使用
到此为止,万事俱备就差用了,在 mian.js 中做如下操作:

总结

  • 以上二次封装较为全面,基本完成了我们之前的需求
  • 在错误的处理上还需要与后端协定好返回值,做具体的约定
  • 封装回调有点多,在使用的时候也需要加上 then() 来处理结果

PS: IE9 不支持 Promise 哦,需要安装一个 polyfill
import 'babel-polyfill'

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复