對jquery的ajax進行二次封裝

在各類前端框架如React、VUE、Angular等層出不窮的今天，前端的開發效率大大提升，且前端在用原始技術開發時的許多問題在使用了框架後也不存在了，我的在使用了vue開發項目後，以爲這些框架真的太好了，真的給咱們節省了不少的開發時間。話雖如此，但依然有不少的前端小夥伴在使用基於jquery的前端技術，也包括本人。

那麼問題來了，前端在開發時勢必會調後端的接口，就會用到ajax，就會在調接口時可能會有各類狀態展現，因而，封裝一個公共的ajax來實現產品的需求就顯得頗有必要。接下來咱們就來實現對jquery的ajax進行二次封裝。

/*
* type              請求的方式  默認爲get
* url               發送請求的地址
* param             發送請求的參數
* isShowLoader      是否顯示loader動畫  默認爲false
* dataType          返回JSON數據  默認爲JSON格式數據
* callBack          請求的回調函數
*/
(function(){
    function AjaxRequest(opts){
        this.type         = opts.type || "get";
        this.url          = opts.url;
        this.param        = opts.param || {};
        this.isShowLoader = opts.isShowLoader || false;
        this.dataType     = opts.dataType || "json";
        this.callBack     = opts.callBack;
        this.init();  
    }

    AjaxRequest.prototype = {
        //初始化
        init: function(){
            this.sendRequest();
        },
        //渲染loader
        showLoader: function(){
            if(this.isShowLoader){
                var loader = '<div class="ajaxLoader"><div class="loader">加載中...</div></div>';
                $("body").append(loader);
            }
        },
        //隱藏loader
        hideLoader: function(){
            if(this.isShowLoader){
               $(".ajaxLoader").remove();
            }
        },
        //發送請求
        sendRequest: function(){
            var self = this;
            $.ajax({
                type: this.type,
                url: this.url,
                data: this.param,
                dataType: this.dataType,
                beforeSend: this.showLoader(),
                success: function(res){
                    self.hideLoader();
                    if (res != null && res != "") {
                        if(self.callBack){
                            if (Object.prototype.toString.call(self.callBack) === "[object Function]") {   //Object.prototype.toString.call方法--精確判斷對象的類型
                                self.callBack(res);
                            }else{
                                console.log("callBack is not a function");
                            }
                        }
                    }
                }
            });
        }
    };

    window.AjaxRequest = AjaxRequest;
})();

頁面調用：

<script>
    new AjaxRequest({
        type: "get",
        url: "https://5ae979d7531a580014142797.mockapi.io/api/v1/records",
        param: "",
        isShowLoader: true,
        dataType: "",
        callBack: function(res){
            console.log(res);
        }    
    });
</script>

以前本篇博文所描述的對ajax的二次封裝雖然也實現了一樣的功能，但卻加入了大量的判斷，好比要判斷某個參數是否傳入，若是沒有傳入，就要給它一個默認值，這仍是其次，麻煩的是若是這個參數沒有傳入，那麼它就會被後續的參數所覆蓋，由此就還要判斷後續的參數的類型以防止參數用錯等等，這不只大大增長了代碼量，還下降了性能，在提高頁面性能需求的今天，至少我認爲這是不可取的，並且我在網上搜了一把，發現基本全部對ajax的二次封裝都是加入了對參數的各類判斷。以下圖：

圖1

圖2

圖3

並且這種的封裝方式本人私心想着多是要求在調用這個方法的時候就必須每一個參數都要傳入，哪怕是傳入了一個空字符串。若是不傳，就會被後邊的參數所覆蓋。好比圖1中的data若是沒有傳入，data就會被success參數所覆蓋，此時data=success，那麼在圖2中success就會被看成ajax的data參數傳給接口。其實呢，success是咱們傳入的一個函數參數，是要用做ajax的回調函數來觸發的，不是看成ajax的參數傳給接口的。（上邊三張圖是截自網絡，沒有惡意，若是須要，能夠私信我刪除）

因而，面向對象的封裝方式我認爲仍是能夠很好的解決以上的種種問題，也大大下降了封裝的成本，提高了性能（至少這種方式不會出現因爲前邊的參數沒有傳入而被後邊的參數所覆蓋的問題）。