Vue二次封装axios为插件使用

不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的

vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因:
基本的封装要求:
统一 url 配置
统一 api 请求
request (请求)拦截器,例如:带上token等,设置请求头
response (响应)拦截器,例如:统一错误处理,页面重定向等
根据需要,结合 Vuex 做全局的loading动画,或者错误处理
将 axios 封装成 Vue 插件使用
文件结构
使用 vue-cli 进行相关的封装,在 src 文件夹下:
src

|
-- http 封装axios模块文件夹

|
---- config.js axios的默认配置

---- api.js 二次封装axios,拦截器等

---- interface.js 请求接口文件

---- index.js 将axios封装成插件

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

api.js

interface.js

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

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

总结
以上二次封装较为全面,基本完成了我们之前的需求

在错误的处理上还需要与后端协定好返回值,做具体的约定

封装回调有点多,在使用的时候也需要加上 then() 来处理结果,async & await

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

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

赶紧努力消灭 0 回复