摘要：前言在中大型的前端應(yīng)用里面項目里面通常包夾了大量的請求，通常情況這些請求夾雜在業(yè)務(wù)代碼里面拓展維護(hù)的成本比較大。測試代碼及源碼下載在中歸納本篇文章是通過對請求調(diào)用前，調(diào)用后的統(tǒng)一處理來更有效的控制這些請求類似于面向切面的思想。

在中大型的前端應(yīng)用里面項目里面通常包夾了大量的ajax請求，通常情況這些請求夾雜在業(yè)務(wù)代碼里面,拓展維護(hù)的成本比較大。

如要改整個項目的url前綴(后端把接口路徑統(tǒng)一加個assets或者h(yuǎn)ttp換成https)，或者要改請求的類型get換post，亦或者統(tǒng)一加個CSRFToken,我們該當(dāng)如何,手動一個個把自己一頭扎進(jìn)業(yè)務(wù)代碼里面去修改嗎?

此時不妨試試用一個js去統(tǒng)一管理這些ajax請求。

以下是我們使用ajax請求的方式

調(diào)用請求的時候拼裝url，在較多ajax請求的時候面,維護(hù)拓展就變得非常的艱難
本文章想法是把url抽象成不同類型的參數(shù)

公共型參數(shù): 每個url都共用的部分 如http類型,url前綴，mockurl前綴,token等

配置型參數(shù): 每個url都不一樣的，但可以提前預(yù)知的部分,如uri地址,ajax請求方式(get/post)

業(yè)務(wù)型參數(shù): 具體進(jìn)業(yè)務(wù)場景方能算出來的參數(shù) 如test=xxx(xxx的值只有程序運行的時候才知道值)

公共型參數(shù)和配置型參數(shù)可以在項目初始化的時候通過邏輯控制并存起來,
業(yè)務(wù)型參數(shù)在具體調(diào)用的時候在具體的業(yè)務(wù)場景獲取。
在通過統(tǒng)一的ajax請求獲取資源

統(tǒng)一的ajax請求，可以在失敗之后,統(tǒng)一拋出異常，成功之后統(tǒng)一改變獲取數(shù)據(jù)的結(jié)構(gòu)等等好處

簡單工程創(chuàng)建 參數(shù)實例，并將實例對象存儲在context內(nèi)部

    (function (root,$) {
    //簡單工廠生成項目統(tǒng)一的ajax參數(shù)對象
    var DBFactory = {
        __: {},
        //可有業(yè)務(wù)代碼設(shè)置mockUrl,prefixUrl等
        set: function (key, value) {
            this.__[key] = value;
        },
        get: function (key) {
            return this.__[key];
        },
        create: function (name, methods) {
            // 禁止創(chuàng)建重名的DB實例
            if (this.context[name]) {
                console.warn("DB: "" + name + "" is existed! ");
                return;
            }
            return this.context[name] = new DB(name, methods);
        },
        // 存儲db實例
        context: {
            
        }
    };


    //DB構(gòu)造函數(shù) 負(fù)責(zé)構(gòu)造ajax參數(shù)對象
    function DB(DBName, methods) {
        var t = this;
        t.cache = {};
        $.each(methods, function (method, config) {
            if (typeof config === "function") {
                t[method] = config;
                return;
            }

            t[method] = function (query) {
                var cfg = {};

                cfg.method = method;

                cfg.DBName = DBName;

                cfg.mockUrl = config.mockUrl;

                // 如果設(shè)置了`mock`代理
                if (cfg.mockUrl && typeof DBFactory.__.mockProxy === "function") {
                    cfg.mockUrl = DBFactory.__.mockProxy(cfg.mockUrl);
                }
                //合并參數(shù)
                cfg.query = $.extend({}, config.query || {}, query || {});
                //判斷是否mock
                cfg.isMock = config.url ? false : true;
                //url前綴供getUrl計算url
                t.urlPrefix = DBFactory.get("urlPrefix") || "";
                //url
                cfg.url = cfg.isMock ? cfg.mockUrl : (t.getUrl(config.url) || cfg.mockUrl);
                // 是否是全局只獲取一次
                cfg.once = typeof config.once === "boolean" ? config.once : false;
                // 數(shù)據(jù)緩存，如果`once`設(shè)置為true，則在第二次請求的時候直接返回改緩存數(shù)據(jù)。
                t.cache[method] = t.cache[method] || null;

                cfg.jsonp = config.jsonp || false;

                cfg.type = config.type || "POST";
                return request(cfg, t);
            };
        });
    }

    /**
     * 獲取正式接口的完整`url`
     * 如果通過`DB.set("urlPrefix", "https://xxx")`設(shè)置了全局`url`的前綴，則執(zhí)行補全
     */
    DB.prototype.getUrl=function (url) {
        if (this.urlPrefix && url.indexOf("http") !== 0 && url.indexOf("http://") !== 0) {
            return this.urlPrefix + url;
        } else {
            return url;
        }
    };

    /**
     *
     * @param cfg  屬性對象提供給ajax修改請求屬性
     * @param db   db提供緩存
     * @returns  ajax promise
     */
    function request(cfg, db) {
        var defer = $.Deferred();
        if (cfg.once && db.cache[cfg.method]) {
            defer.resolve(db.cache[cfg.method]);
        } else {
            var ajaxOptions = {
                url: cfg.url,
                data: cfg.query,
                success: function (resp) {
                    //cfg.once && (db.cache[cfg.method] = resp);
                    defer.resolve(resp);
                },
                error: function (error) {
                    defer.reject({
                        fail:true,
                        msg:  error
                    });
                }
            };

            if (cfg.jsonp === true) {
                ajaxOptions.dataType = "jsonp";
            } else {
                ajaxOptions.dataType = "json";
                ajaxOptions.type = cfg.type;
            }

            $.ajax(ajaxOptions);
        }
        return defer.promise();
    };
    root.DBFactory = DBFactory;
})(this,$);

db.js 負(fù)責(zé)注冊ajax請求，并全局的設(shè)置url前綴,是否啟用mockurl,對不同請求配置不同的請求方式，是否jsonp等

(function (DBF) {
var isOnline = false;
// 設(shè)置全局的`url`前綴
    var urlPrefixForLocal = location.protocol + "http://" + location.host+"/";
    if (!isOnline) {
        DBF.set("urlPrefix", urlPrefixForLocal);
    } else {
        DBF.set("urlPrefix", "/trs");
    }

// MockProxy mock 數(shù)據(jù)服務(wù)器(node/php代理)代理，以跨過同源檢測
    DBF.set("mockProxy", function (mockUrl) {
        return "/mock?url=" + mockUrl
    });

    DBF.create("Test", {
        get: {
            type: "GET",
            // jsonp: true,
            url: "example/ajax-data/data.json"
            // mockUrl: urlPrefixForLocal + "/ajax-data/data.json",
            //once: true
        }
    });

    DBF.create("GetPersonInfo", {
        get: {
            type: "GET",
            url: "getMySimpleInfo.json",
            once: true
        }
    });

    window.DB = DBF.context;
})(window.DBFactory);

ajax的真正調(diào)用者,通過DB.xxx 拿到參數(shù)對象后以get的形式觸發(fā)實際的ajax請求，并附帶業(yè)務(wù)代碼里面的參數(shù)。

            $(document).ready(
            function () {
                var DB = window.DB;
                var promise1 = $.when(DB.Test.get({test: true}));
                var promise2 = $.when(DB.GetPersonInfo.get());
                promise1.then(
                        function (res) {
                            console.log(res)
                            $("#promise1").html("promise1:"+res.data);
                        }, function (error) {
                            console.log(error);
                        });

                promise2.then(
                        function (res) {
                            console.log(res)
                        }, function (error) {
                            $("#promise2").html("promise2:"+error.msg.responseText);
                        });
            }
    )
   

promise1 拿data.json 返回成功
promise2 拿getMySimpleInfo.json 資源未獲取到，返回失敗

本篇文章是以jquery形式展示的，但稍事修改也是可以在backbone,react等框架內(nèi)使用。
測試代碼及源碼下載在https://github.com/laughing-p... 中