怎么在Vue中对axios进行封装

　　介绍

本文章向大家介绍怎么在Vue中对axios进行封装的基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

Vue的优点

Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

<李>

<强>实现的功能

<李>

统一捕获接口报错:用的axios内置的拦截器

<李>

弹窗提示:引入,UI元素的,消息组件

<李>

报错重定向:路由钩子

<李>

基础鉴权:服务端过期时间戳和令牌,还有借助路由的钩子

<李>

表单序列化:我这边直接用,qs (npm模块),你有时间也可以自己写

<强>用法及封装

<强>用法

//,服务层,,,进口默认会找该目录下index.js的文件,这个可能有小伙伴不知道//,可以去了解npm的引入和es6引入的理论概念 　　import  axiosPlugin 得到“。/server",, 　　Vue.use (axiosPlugin); 　　 　　对axios的封装(axios: index.js ) 　　 　　import  axios 得到“axios"; 　　import  qs 得到“qs"; 　　{import  Message },得到“element-ui"; 　　import  router 得到“. ./router"; 　　const  Axios =, axios.create ({ 　　,baseURL:“/?,,//,因为我本地做了反向代理 　　10000年,超时: 　　,responseType:“json", 　　,withCredentials:真的,,//,是否允许带饼干这些 　　,标题:{ 　　“Content-Type"才能:,“应用程序/x-www-form-urlencoded; charset=utf-8" 　　,} 　　});//文章传参序列化(添加请求拦截器) 　　Axios.interceptors.request.use (=,config 祝辞,{//才能,在发送请求之前做某件事 　　if 才能; 　　,,config.method ===,“post" 　　),{才能 　　,,//,序列化 　　,,config.data =, qs.stringify (config.data);//,,,温馨提示,若是贵公司的提交能直接接受json 格式,可以不用,qs 来序列化的 　　,,}//才能,若是有做鉴权token ,,就给头部带上令牌//才能,若是需要跨站点,存放到,cookie 会好一点,限制也没那么多,有些浏览环境限制了,localstorage 的使用//才能,这里localStorage一般是请求成功后我们自行写入到本地的,因为你放在vuex刷新就没了//才能,一些必要的数据写入本地,优先从本地读取 　　if 才能;(localStorage.token), { 　　,,config.headers.Authorization =, localStorage.token; 　　,,} 　　return 才能;配置; 　　},=,error 祝辞,{//才能,error 的回调信息,看贵公司的定义 　　消息({才能//,,,饿了么的消息弹窗组件,类似吐司 　　,,,showClose:没错, 　　,,,的信息:error ,,, error.data.error.message, 　　,,,类型:& # 39;错误# 39; 　　,,}); 　　return 才能Promise.reject (error.data.error.message); 　　,} 　　)；//返回状态判断(添加响应拦截器) 　　Axios.interceptors.response.use (=,res 祝辞,{//对才能响应数据做些事 　　if 才能;(res.data ,,, ! res.data.success), { 　　消息({,, 　　,,,//,饿了么的消息弹窗组件,类似吐司 　　,,,showClose:,真的, 　　,,,的信息:res.data.error.message.message 　　,,,,? res.data.error.message.message 　　,,,,,,res.data.error.message, 　　,,,类型:,“error" 　　,,}); 　　,,return  Promise.reject (res.data.error.message); 　　,,} 　　return 才能,res; 　　},=,error 祝辞,{//,才能用户登录的时候会拿到一个基础信息,比如用户名,令牌,过期时间戳//,才能直接丢localStorage或sessionStorage者 　　if 才能;(! window.localStorage.getItem (“loginUserBaseInfo")), {//,,,若是接口访问的时候没有发现有鉴权的基础信息,直接返回登录页 　　,,router.push ({ 　　,,,路径:,“/login" 　　,,}); 　　,,},{else //,,,若是有基础信息的情况下,判断时间戳和当前的时间,若是当前的时间大于服务器过期的时间//,,,乖乖的返回去登录页重新登录 　　,,let  lifeTime =,,,JSON.parse (window.localStorage.getItem (“loginUserBaseInfo")) .lifeTime  * 　　,,,1000; 　　,,let  nowTime =, new 日期().getTime();,//,当前时间的时间戳 　　,,console.log (nowTime,,一辈子); 　　,,console.log (nowTime 祝辞,一生); 　　,,if  (nowTime 祝辞,一生),{ 　　,,,消息({ 　　,,,,showClose:,真的, 　　,,,,的信息:,“登录状态信息过期,请重新登录“, 　　,,,,类型:,“error" 　　,,,}); 　　,,,router.push ({ 　　,,,,路径:,“/login" 　　,,,}); 　　,,},{else  　　,,,//,下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面 　　,,,if  (error.response.status ===, 403), { 　　,,,,router.push ({ 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么在Vue中对axios进行封装