jquery-ajax请求：超时设置，增长 loading 提高体验

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

常见的作法是：前端

一、设置超时时间，一旦时间超过设定值，便终止请求；
二、页面内容加载以前，手动增长一个 loading 层。java

代码以下：ajax

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(); }) } } }) }