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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM