【轮询】【ajax】【js】【spring boot】ajax超时请求:前端轮询处理超时请求解决方案 + spring boot服务设置接口超时时间的设置


 

 

场景描述:

ajax设置timeout在本机测试有效,但是在生产环境等外网环境无效的问题

 

1.ajax的timeout属性设置 前端请求超时事件【网络连接不稳定时候,就无效了】

var data = JSON字符串; $.ajax({ type: "POST", url: url, dataType: 'json', timeout: 3000,//3s钟超时
 data: data, xhrFields: { withCredentials: true }, success: function (json) { alert("保存成功") }, error: function (err, textStatus, errorThrown) { alert("保存失败") } });

 

属性说明:

timeout: //单位是毫秒值 timeout: 0  //代表永不超时 

 

其他说明:

当然,ajax里面设置的是前端超时事件,后端服务 的接口 也有超时时间。 
声明: timeout属性设置的超时时间,肯定是有效果的。
但是  在生产环境等时候,因为网络跳动不稳定,导致 前后端连接中断了,即使这里的超时时间设置再大  或者设置永不超时,也会进入error,即会发生超时情况。这种时候,就需要 在前端使用轮询去解决这种问题了。

 

 

 

2.spring boot为例,设置接口超时时间的两种方式

 

1> 在配置文件application.properties中加了spring.mvc.async.request-timeout=20000,意思是设置超时时间为20000ms即20s,
2>还有一种就是在config配置类中加入 public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override public void configureAsyncSupport(final AsyncSupportConfigurer configurer) { configurer.setDefaultTimeout(20000); configurer.registerCallableInterceptors(timeoutInterceptor()); } @Bean public TimeoutCallableProcessingInterceptor timeoutInterceptor() { return new TimeoutCallableProcessingInterceptor(); } }

 

 

 

 

3.前端轮询方案 ,查询后端的保存状态,直到查询到后端的保存状态为成功,才做相应的用户响应操作 【解决ajax设置timeout避免不了的网络不稳定的问题】

轮询方案简介:

这里就要对 1中的 ajax进行改造了 。
这里使用 js的  setInterval()发起轮询     clearInterval()停止轮询


setInterval(code,millisec) 参数 描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

 

轮询方案代码:

var data = JSON字符串; var myFlag = new Date().getTime();     //作为本次保存的 唯一标识
                data.myFlag = myFlag;  //作为后端入参传给后台
 $.ajax({ type: "POST", url: url, dataType: 'json', timeout: 0,//永不超时
 data: data, xhrFields: { withCredentials: true }, success: function (json) { alert("处理成功的逻辑 依旧写在这里"); }, error: function (err, textStatus, errorThrown) { //此处要判断 error时候,是不是因为超时导致的,如果是超时导致的error,那就做轮询
                        if (textStatus == 408 || textStatus == 'timeout') { //轮询查询批量保存状态
                            window.myFlag2222 = setInterval(function (){ this.batchSaveTimer(myFlag); },6000); }else { loading.hide(); $('.J_button_submit').prop('disabled', false); tips.show("保存失败"); } } }); batchSaveTimer: function (flag) { $.ajax({ type:'get', url: url + "/" + flag, dataType:'json', cache:true, xhrFields: { withCredentials: true }, success:function(result) { if (result.code && result.code == 'success' ) { //当后端保存状态为1 代表保存成功
                if (result.data == '1') { //这里就 停止轮询 入参一定是 发起轮询的setInterval()方法的返回值
 clearInterval(window.myFlag2222); alert("这里同样写一份  处理成功的逻辑"); //当后端保存状态为-1 代表保存失败
                } else if (result.data == '-1') { //这里视业务而定,是否停止轮询
 clearInterval(window.myFlag2222); alert("这里写一份  处理失败的逻辑"); } } }, error:function() { alert("服务器异常") } }); },

 

附录说明:

当然,后端处理也很简单,在redis记录一个 status. myFlag作为key status作为value 开始保存,把status设置为0 开始处理 status设置为1 处理成功 status设置为-1 处理失败

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM