700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jquery-ajax请求:超时设置 增加 loading 提升体验

jquery-ajax请求:超时设置 增加 loading 提升体验

时间:2020-06-11 22:01:49

相关推荐

jquery-ajax请求:超时设置 增加 loading 提升体验

前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白。如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的重点。

常见的做法是:

1、设置超时时间,一旦时间超过设定值,便终止请求;

2、页面内容加载之前,手动增加一个 loading 层。

代码如下:

getAjax: function (method, apiUrl, options, callback) {var xhr = $.ajax({type: method,url: apiUrl,data: options,timeout: 5000, // 设置超时时间 dataType: "json", beforeSend: function (xhr) { $.showLoading(); // 数据加载成功之前,使用loading组件 }, success: function(json) { $.hideLoading(); // 成功后,隐藏loading组件 if(callback && callback instanceof Function === "true") { callback(json); } }, error: function (textStatus) { console.error(textStatus); }, complete: function (XMLHttpRequest,status) { if(status == 'timeout') { xhr.abort(); // 超时后中断请求 $.alert("网络超时,请刷新", function () { location.reload(); }) } } }) }

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。