對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的參數傳給接口的。（上邊三張圖是截自網絡，沒有惡意，如果需要，可以私信我刪除）

於是，面向對象的封裝方式我認為還是可以很好的解決以上的種種問題，也大大降低了封裝的成本，提升了性能（至少這種方式不會出現由於前邊的參數沒有傳入而被后邊的參數所覆蓋的問題）。