基于abp技术的项目,前端vue框架的axios封装,在框架初始化代码的基础上完善拦截器。
起因
1.遇到问题:
基于abp的前端vue框架项目,登录失败却没有任何反应,且界面一直在loading。
2.API响应数据结构和内容:
3.原因:
3.1. 修复并排除API、前端登录逻辑的bug,锁定问题——登录密码错误,属于请求接口传参错误400,但接口请求是200。
3.2. 前端是使用Axios拦截器捕获异常,而Axios拦截器的error捕获,只能捕获非2开头的状态码情况。
4. 解决方案:
4.1.拦截器正常响应结构中,捕获异常——利用数据字典的success参数(接口是否真正请求成功)做关键判断。
4.2.关闭登录loading。
4.3.输出异常信息。
let vm = new Vue({
});//创建vue实例
//响应拦截器结构:全局处理请求API响应数据
axios.interceptors.response.use((respon) => {
//正常响应操作
if (respon.data.success) {
//根据数据字典中的success判断
return respon //下一步
} else {
vm.$Message.destroy();//全局销毁iview Message——loading提示
let resError = respon.data.error;
if (!!resError.details)
vm.$Modal.error({
title: resError.message,
content: resError.details})//输出异常结构中的提示内容,流程结束
}
}, (error) => {
//异常响应,捕获非2开头状态码接口情况
if (!!error.response && !!error.response