前端發(fā)送Ajax請(qǐng)求到服務(wù)器，服務(wù)器返回?cái)?shù)據(jù)這一過(guò)程，因原因不同耗時(shí)長(zhǎng)短也有差別，且這段時(shí)間內(nèi)頁(yè)面顯示空白。如何優(yōu)化這段時(shí)間內(nèi)的交互體驗(yàn)，以及長(zhǎng)時(shí)間內(nèi)服務(wù)器仍未返回?cái)?shù)據(jù)這一問(wèn)題，是我們開(kāi)發(fā)中不容忽視的重點(diǎn)。

常見(jiàn)的做法是：

1、設(shè)置超時(shí)時(shí)間，一旦時(shí)間超過(guò)設(shè)定值，便終止請(qǐng)求；
2、頁(yè)面內(nèi)容加載之前，手動(dòng)增加一個(gè) loading 層。

代碼如下：

getAjax: function (method, apiUrl, options, callback) {var xhr = $.ajax({type: method,url: apiUrl,data: options,timeout: 5000, // 設(shè)置超時(shí)時(shí)間 dataType: "json", beforeSend: function (xhr) { $.showLoading(); // 數(shù)據(jù)加載成功之前，使用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(); // 超時(shí)后中斷請(qǐng)求 $.alert("網(wǎng)絡(luò)超時(shí)，請(qǐng)刷新", function () { location.reload(); }) } } }) }

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhangruiqi/p/7845592.html

總結(jié)

以上是生活随笔為你收集整理的jquery-ajax请求：超时设置，增加 loading 提升体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。