本文主要是介绍axios的拦截器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
项目中的用法:
// 创建 axios 实例
let myRequest = axios.create({
responseType: 'json',
// validateStatus 是axois的内置方法,在axios包的index.d.ts声明文件中做了声明
validateStatus(status) {
// 200 外的状态码都认定为失败
return status === 200;
}
});
// 请求拦截, 一般用于在请求头中添加token信息
myRequest.interceptors.request.use(config => {
const token = sessionStorage.getItem('token')
if (token ) { //如果 token 存在,则每个http header都加上token
config.headers.authorization = token //请求头加上token
}
return config
},error=>{
return Promise.reject(error)
})
// 响应拦截
myRequest.interceptors.response.use(response=>{
return response;
},error=>{
// 可对一般的http状态码进行拦截处理,返回友好的用户提示
switch (error.response.status) {
case 404:
ElementUI.Notification({
title: '系统提示',
message: '很抱歉,资源未找到',
type: 'info'
});
break;
case 403:
break;
case 401:
ElementUI.MessageBox.confirm('登录信息已失效,请重新登陆!', '提示', {
confirmButtonText: '确定',
showCancelButton: false,
closeOnClickModal: false,
type: 'warning',
showClose: false
}).then(() => {
// 清空session中保存的所有值
sessionStorage.clear();
router.push("/");
location.reload();
});
break;
default:
ElementUI.Notification({
title: '系统提示',
message: errorMessage,
type: 'info'
});
break;
}
return Promise.reject(error);
})
// 对 axios 的各种请求方式,进行二次封装
const request = {
// 与后台商定后,统一项目中的入参格式
post(url, params) {
// 格式化 请求入参
params = formatParams(params);
return myRequest.post(url, params, {
headers: {
'Content-Type': 'application/json'
}
});
},
// 因为 axios 中post和get的调用方式不一样,此处对get的封装,主要为了在项目中使用时,get和post写法一样,更加方便
get(url, params) {
let _params;
if (Object.is(params, undefined)) {
_params = '';
} else {
_params = '?';
for (let key in params) {
if (params.hasOwnProperty(key) && params[key] !== null) {
_params += `${key}=${encodeURIComponent(params[key])}&`;
}
}
}
return myRequest.get(`${url}${_params}`);
}
}
function formatParams(params) {
return {
'ROOT': {
'HEAD': {},
'BODY': params
}
};
}
export default request;
拦截器作用:
- 在请求发出前对http请求的head做一些处理,比如添加一些token信息,进行用户验证(请求拦截器)
- 在得到服务器接口响应后,对响应数据做一些统一操作,或者判断常用的http状态码,进行不同的处理,比如404资源未找到、401未授权、403无权访问等
这篇关于axios的拦截器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!