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