后端抛出异常处理后并在前端展示
Memory守候 2024-07-20 15:03:01 阅读 66
记录一下最近出现的问题:有时候前端并不能仅仅依靠后台返回的code去进行报错提示,或者通过.catch去捕获异常并弹出,导致页面非常不友好,那有没有办法让前端报错提示由后端控制呢,诶,当然有,上代码!
1.自定义异常类,捕获全局异常,统一响应结果
/**
* 业务异常
*/
public class BaseException extends RuntimeException {
public BaseException() {
}
public BaseException(String msg) {
super(msg);
}
}
/**
* 全局异常处理
*/
@ControllerAdvice(annotations = {RestController.class, Controller.class})
@ResponseBody
@Slf4j
public class GlobalExceptionHandler {
/**
* 异常处理方法
* @return
*/
@ExceptionHandler(BaseException.class)
public Result<String> exceptionHandler(BaseException ex){
log.error(ex.getMessage());
return Result.error(ex.getMessage());
}
}
这里@data注解是有着lombok依赖,免去繁琐的get set方法,需要的可以自行导入,当然也可以用pgt生成get set方法,亦或是其他方法
/**
* 后端统一返回结果
* @param <T>
*/
@Data
public class Result<T> implements Serializable {
private Integer code; //编码:1成功,0和其它数字为失败
private String msg; //错误信息
private T data; //数据
public static <T> Result<T> success() {
Result<T> result = new Result<T>();
result.code = 20000;
return result;
}
public static <T> Result<T> success(T object) {
Result<T> result = new Result<T>();
result.data = object;
result.code = 20000;
return result;
}
public static <T> Result<T> error(String msg) {
Result result = new Result();
result.msg = msg;
result.code = 0;
return result;
}
}
写好以上两个类,想抛出什么消息直接 throw new BaseException(“博主帅脸加载异常!”)就可以啦!
但是!" log.error(ex.getMessage()) "=>此时抛出异常信息仅在后台展示
也向前端 return Result.error(ex.getMessage());
2.前端展示
那么,后端返回了,前端就可以拿到这个数据,在请求回调函数中直接写
if(code===0){ this.$message.error(res.msg)}
就能正常展示异常信息啦!
上一篇: 2024年前端最新Vue常用组件库的比较分析(pc端),2024年最新前端面试录音在线听
下一篇: vue el-form中添加el-checkbox多选框,实现将所选内容保存到后台,并能回显到前端的解决(如果有更好的方法欢迎评论)
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。