项目中 http响应拦截器

本文介绍了一个使用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;
                }
            });
        }
    },


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值