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