vue axios请求拦截实例代码
axios简介
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,它本身具有以下特征:
从浏览器中创建XMLHttpRequest
从node.js发出http请求
支持PromiseAPI
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止CSRF/XSRF
下面代码给大家介绍vueaxios请求拦截,具体代码如下所示:
importaxiosfrom'axios';//引入axios依赖 import{Message}from'element-ui'; importCookiesfrom'js-cookie';//引入cookie操作依赖 importrouterfrom'@/router/index'//引入路由对象 axios.defaults.timeout=5000; axios.defaults.baseURL=''; //httprequest封装请求头拦截器 axios.interceptors.request.use( config=>{ vartoken='' if(typeofCookies.get('user')==='undefined'){ //此时为空 }else{ token=JSON.parse(Cookies.get('user')).token }//注意使用的时候需要引入cookie方法,推荐js-cookie config.data=JSON.stringify(config.data); config.headers={ 'Content-Type':'application/json' } if(token!=''){ config.headers.token=token; } returnconfig; }, error=>{ returnPromise.reject(err); } ); //httpresponse封装后台返回拦截器 axios.interceptors.response.use( response=>{ //当返回信息为未登录或者登录失效的时候重定向为登录页面 if(response.data.code=='W_100004'||response.data.message=='用户未登录或登录超时,请登录!'){ router.push({ path:"/", querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } returnresponse; }, error=>{ returnPromise.reject(error) } ) /** *封装get方法 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionfetch(url,params={}){ returnnewPromise((resolve,reject)=>{ axios.get(url,{ params:params }) .then(response=>{ resolve(response.data); }) .catch(err=>{ reject(err) }) }) } /** *封装post请求 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionpost(url,data={}){ returnnewPromise((resolve,reject)=>{ axios.post(url,data) .then(response=>{ resolve(response.data); },err=>{ reject(err) }) }) } /** *封装导出Excal文件请求 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionexportExcel(url,data={}){ returnnewPromise((resolve,reject)=>{ axios({ method:'post', url:url,//请求地址 data:data,//参数 responseType:'blob'//表明返回服务器返回的数据类型 }) .then(response=>{ resolve(response.data); letblob=newBlob([response.data],{type:"application/vnd.ms-excel"}); letfileName="订单列表_"+Date.parse(newDate())+".xls"; if(window.navigator.msSaveOrOpenBlob){ navigator.msSaveBlob(blob,fileName); }else{ varlink=document.createElement('a'); link.href=window.URL.createObjectURL(blob); link.download=fileName; link.click(); window.URL.revokeObjectURL(link.href); } },err=>{ reject(err) }) }) } /** *封装patch请求 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionpatch(url,data={}){ returnnewPromise((resolve,reject)=>{ axios.patch(url,data) .then(response=>{ resolve(response.data); },err=>{ reject(err) }) }) } /** *封装put请求 *@paramurl *@paramdata *@returns{Promise} */ exportfunctionput(url,data={}){ returnnewPromise((resolve,reject)=>{ axios.put(url,data) .then(response=>{ resolve(response.data); },err=>{ reject(err) }) }) }
总结
以上所述是小编给大家介绍的vueaxios请求拦截,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!