封装一下vue中的axios示例代码详解
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。
安装
npminstallaxios;//安装axios
好了,下面开始今天的正文。
此次封装用以解决:(对于登录功能的可以直接使用,其他网络请求也可以直接用,如果有洁癖,可以把token有关的几行代码删掉)
ps:使用时得的引入axios时:importaxiosfrom'这个文件的名字及相对路径'
- 接受后台token
- post参数自动转换,省略qs.stringify()
- 后台token过期之后自动清除本地数据,以便下次再次输入账号密码
- 更好的错误提示信息
/** *封装网络请求 */ importaxiosfrom"axios" importqsfrom"querystring" importstorefrom'../store' importrouterfrom'../router' //token过期之后重新回登录界面 consttoLogin=()=>{ router.push("/login") } //错误信息响应方法 consterrroHandle=(status,other)=>{ switch(status){ case400: console.log("服务器无法理解请求信息"); break; case401: console.log("用户信息验证失败"); localStorage.removeItem("token");//可选项 toLogin(); break; case403: console.log("请求被限制"); localStorage.removeItem("token");//可选项 toLogin(); break; case404: console.log("客户端请求信息错误"); break; default: console.log(other); break; } } //创建axios对象 constinstance=axios.create({ timeout:5000 }) //挂在全局对象 instance.defaults.baseUrl=""; instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'; //拦截器:请求拦截和响应拦截post请求参数需要转码 //axios的返回值对象要求是一个promise对象 instance.interceptors.request.use(config=>{ if(config.method==="post"){ config.data=qs.stringify(config.data) } if(store.state.token){ config.headers.authorization=store.state.token; } returnconfig; },error=>Promise.reject(error)) instance.interceptors.response.use( //成功 response=>response.status===200?Promise.resolve(response):Promise.reject(response), //失败 error=>{ const{response}=error; if(response){ errroHandle(response.status,response.data) returnPromise.reject(response) }else{ //错误信息都无法返回 console.log("请求被中断"); } } ) exportdefaultinstance
总结
以上所述是小编给大家介绍的封装一下vue中的axios示例代码详解,希望对大家有所帮助!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。