Vue封装Axios请求和拦截器的步骤
PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vuecreatemy-project
axios是一个基于promise的http库,可以用在浏览器和node.js中,也是vue官方推荐使用的http库。
axios很好用,其中之一就是它的拦截器十分强大,我们可以为请求和响应设置拦截器,比如请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便,响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态、授权。
之前初学的时候,经常将axios数据请求写在各组件方法内,但实践证明,如果项目接口变动要修改url地址等参数会比较为麻烦,不易维护,于是需要对axios进行封装并将接口统一管理。
当然在最之前,我们需要安装axios,使用命令npminstallaxios--save即可。
一、新建函数文件
在src目录下新建一个axios目录,然后在里面创建axios-request.js和axios-api.js两个文件,
其中aixos-request.js用于对axios进行封装,axios-api.js用于接口的统一管理。
二、对axios进行封装
axios-request.js代码如下:
importaxiosfrom"axios"; import{Message}from"element-ui"; //创建一个axios实例 constaxiosService=axios.create({ baseURL:process.env.VUE_APP_BASE_API,//url=baseurl+requesturl timeout:5000//设置超时时间为5s }); //request拦截器==>对请求参数进行处理 axiosService.interceptors.request.use( config=>{ //可以在发送请求之前做些事情 //比如请求参数的处理、在headers中携带token等等 returnconfig; },error=>{ //处理请求错误 console.log(error);//fordebug Promise.reject(error); } ); //respone拦截器==>对响应做处理 axiosService.interceptors.response.use( response=>{ constres=response.data; //如果自定义的返回码不等于200,就返回一个错误 if(res.code!==200){ returnPromise.reject(newError(res.message||"Error")) }else{ returnres; } },error=>{ //判断error的status代码,并将对应的信息告知用户 lettext=""; leterr=JSON.parse(JSON.stringify(error)); if(err.response.status){ switch(error.response.status){ case400: text="请求错误(400),请重新申请"; break; case401: text="登录错误(401),请重新登录"; returnthis.$router.replace("/login"); case403: text="拒绝访问(403)"; break; case404: text="请求出错(404)"; break; case408: text="请求超时(408)"; break; case500: text="服务器错误(500),请重启软件或切换功能页!"; break; case501: text="服务未实现(501)"; break; case502: text="网络错误(502)"; break; case503: text="服务不可用(503)"; break; case504: text="网络超时(504)"; break; case505: text="HTTP版本不受支持(505)"; break; default: text="网络连接出错"; } }else{ text="连接服务器失败,请退出重试!"; } Message({ showClose:true, message:text, type:"error" }); returnPromise.reject(error); } ); //将写好的axios实例暴露出去 exportdefaultaxiosService;
三、对接口进行统一管理
axios-api.js代码如下:
importaxiosServicefrom"./axios-request";//从axios-request.js内引入axiosService //下面是POST形式 exportconstuserLogin=data=>{ returnaxiosService({ url:"/xxxx/user/xxxx",//根据实际接口地址来写 method:"post", data }); }; //下面是GET形式 exportconstuserInfo=params=>{ returnaxiosService({ url:"/xxxx/user/xxxx",//根据实际接口地址来写 method:"get", params }); };
这里要注意下,post参数放在data内,get参数放在params内!
四、在组件内使用写好的接口
在组件中使用:
下面是模拟的一个登录接口,代码不太严谨,仅演示大致用法:
上面的代码中我们用了asyncawait,是ES7新出的特性,具体用法可以Google或者到MDN上查看。
五、总结
当然也可以不将接口统一管理,而只用axios封装,然后在组件内写异步请求函数。
以上是个人在之前学习的时候,所用的封装方式,如有错误之处欢迎留言指正。
以上就是Vue封装Axios请求和拦截器的步骤的详细内容,更多关于Vue封装的资料请关注毛票票其它相关文章!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。