项目中 http响应拦截器

最新推荐文章于 2025-06-26 17:30:14 发布

原创最新推荐文章于 2025-06-26 17:30:14 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

21 篇文章

订阅专栏

es6

10 篇文章

订阅专栏

本文介绍了一个使用Axios实现的HTTP请求与响应拦截器的实例，该实例包括了超时设置、请求响应拦截逻辑及错误处理方法。特别针对不同错误码进行了详细处理，确保应用程序能够优雅地处理各种HTTP请求异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 超时时间
axios.defaults.timeout = 5000;
// http请求拦截器
axios.interceptors.request.use(config => {
// MintUI Loading方法
// Indicator.open();
return config;
}, error => {
// Indicator.close();
ZXToastMessage({
title: '提示', //标题如果不设置title 隐藏
content: '加载超时',
buttonType: 'oneButton',
oneButton: {
title: '确定'
}
});
return Promise.reject(error);
});
// http响应拦截器
axios.interceptors.response.use(response => {
// 响应成功关闭loading
// Indicator.close();
if (response.data) {
if (response.data.errorCode && response.data.errorCode !== '0') {
// if (response.data.errorCode === '2030') {
// // 2030 用户token过期跳首页 20180130
// vm.axiosErrorHandler(response, 'goFirst');
// }
// else
if (response.data.errorCode === '2037' || response.data.errorCode === '2054') {
// 未注册过的用户，需要输入手机号去登录 20180205 不用处理，直接在login页处理即可
} else {
//直接是弹出错误信息
vm.axiosErrorHandler(response, 'goMsg');
}
} else if (response.data.statusCode && response.data.statusCode !== 200 && response.data.statusCode !== 100) {
// 20180604 优惠券或权益不存在
if (response.data.statusCode === 3601) {
vm.$router.push({
path: '/Weal'
});
return;
} else if (response.data.statusCode === 1004 || response.data.statusCode === 2010) {
// || response.data.statusCode === 2011
// 1004: 会员等级抽奖时未中奖的情况 20180530
// 2010: 会员特权的领取为已领取的数据 20180623
// 2011: 会员特权里已抽奖过，再次抽奖后的处理 20180625
return response;
} else {
//直接是弹出错误信息 20180515
vm.axiosErrorHandler(response, 'goMsg');
// // 积分接口，参数不合法
// if(response.data.statusCode === 10000){
// //直接是弹出错误信息
// vm.axiosErrorHandler(response, 'goMsg');
// }
}
}
}
return response;
}, error => {
// Indicator.close();
// 跳错误页 20180130
vm.axiosErrorHandler(error, 'goUrl');
return Promise.reject(error); // 返回接口返回的错误信息

});

methods: {
// 异常信息的弹层或跳错误页的处理 20180205
axiosErrorHandler(parJson, goTo) {
if(parJson instanceof Error){
return;
}
let resUid, resErrorCode, resMsg;
if (!parJson.data['uid']) {
resUid = '';
} else {
resUid = parJson.data['uid'];
}
if (parJson.data.errorCode) {
resErrorCode = parJson.data.errorCode;
} else if (parJson.data.statusCode) {
resErrorCode = parJson.data.statusCode;
}
if (parJson.data.msg) {
resMsg = parJson.data.msg;
} else if (parJson.data.message) {
resMsg = parJson.data.message;
}
let timestamp = new Date().getTime();
// 请求错误的接口，给红健那边发过去，便于后台记录及查询。
vm.$http.post(vm.pageData.baseDataUrl + 'authserver/errorHandler/log/send', {
"userToken": vm.pageData.lmUserToken,
"channelId": vm.pageData.lmChannelId,
"uid": resUid,
"createTime": timestamp,
"errorCode": resErrorCode,
"msg": resMsg
}).then((response) => {
if (goTo === 'goMsg') {
let jumpUrl = assetsConfig.customerLink + 'errorCode' + resErrorCode;
ZXToastMessage({
title: '哎呦，出错了！', //标题如果不设置title 隐藏
content_html: `<p style="margin:10px 0 5px;">${resMsg}</p>
<p>发生了错误：#${resErrorCode}</p>
<div>
<a href= "${jumpUrl}" style="display: inline-block;font-size:12px;line-height: 15px;margin-top: 10px;">
<svg class="icon" aria-hidden="true" style="width:40px; height: 40px; line-height: 40px; color: #f4426a;">
<use xlink:href="#icon-kefu"></use>
</svg>
<p style="height: 22px;line-height: 22px;color: #f4426a;">咨询客服</p>
</a>
</div>`,
buttonType: 'oneButton',
oneButton: {
title: '确定'
}
});
} else if (goTo === 'goFirst') {
vm.$router.push({
path: '/first'
});
return;
} else if (goTo === 'goUrl') {
vm.$router.push({
path: '/error/' + encodeURIComponent(resMsg) + '/' + resErrorCode
});
return;
}
});
}
},