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请求拦截，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！