情景
①前端用 jq 的 $.ajxa 请求服务器
②后端抛出异常
③前端显示异常信息给用户
基础知识
$.ajax 请求成功的条件
- http 状态码为 2xx
- 后端返回数据类型符合预期(dataType)
异常 http 状态码
- 服务器内部异常:500
- 用户请求异常:400
规规矩矩的解决方案
json 响应的 http 状态码该怎么来就怎么来
问题
- 网络运营商会对一些请求失败的状态码进行劫持(https 可以解决)
- 无法触发 $.ajax 请求成功的回调函数,而是触发失败的回调函数。虽然在失败回调函数中,也可以获取到 json 响应体(如下代码第7行和第11行输出的都是 joson 响应体)但是这样比较麻烦~
$.ajax({ url: '/test/testException', method: 'get', dataType: 'json', success:function (data) { console.log('成功'); console.log(data); }, error:function (data) { console.log('失败'); console.log(data.responseJson); } });
好的解决方案
即使是抛出异常,http 状态码也返回 200,确保 $.ajax 的请求成功回调函数被调用。
然后将真实的 http 状态码写入 code 中,如下图所示:
最佳解决方案
使用 axios 包发起请求,使用响应拦截器处理。
详见:基于 laravel 和 axios 搭建 ajax 请求脚手架