jQuery進階：用最優雅的方式寫ajax請求

時間 2019-12-08

原文原文鏈接

或許你也能夠試試： xfire: 簡單優雅、高度可配置的fetch接口批量生成工具

首先須要一個配置文件

var api = {
    basePath: 'http://192.168.200.226:58080',
    pathList: [
        {
            name: 'agentHeartBeat',
            path:'/api/csta/agent/heartbeat/{{agentId}}/{{type}}/{{something}}',
            method:'get'
        },
        {
            name: 'setAgentState',
            path: '/api/csta/agent/state',
            method: 'post'
        },
        {
            name: 'getAgents',
            path: '/user/agent/{{query}}',
            method: 'get'
        }
    ]
}

而後須要一個方法，把配置文件生成接口

function WellApi(Config){
var headers = {};
var Api = function(){};

Api.pt = Api.prototype;

var util = {
    ajax: function(url, method, payload) {
        return $.ajax({
            url: url,
            type: method || "get",
            data: JSON.stringify(payload),
            headers: headers,
            dataType: "json",
            contentType: 'application/json; charset=UTF-8'
        });
    },

    /**
     * [render 模板渲染]
     * 主要用於將 /users/{{userId}} 和{userId: '89898'}轉換成/users/89898，和mastache語法差很少，
     * 固然咱們不必爲了這麼小的一個功能來引入一個模板庫
     * query字符串能夠當作一個參數傳遞進來
     * 例如： /users/{{query}}和{query:'?name=jisika&sex=1'}
     * @Author   Wdd
     * @DateTime 2017-03-13T19:42:58+0800
     * @param    {[type]} tpl [description]
     * @param    {[type]} data [description]
     * @return   {[type]} [description]
     */
    render: function(tpl, data){
        var re = /{{([^}]+)?}}/;
        var match = '';

        while(match = re.exec(tpl)){
            tpl = tpl.replace(match[0],data[match[1]]);
        }

        return tpl;
    }
};

/**
 * [setHeader 暴露設置頭部信息的方法]
 * 有些方法須要特定的頭部信息，例如登陸以後才能獲取sesssionId,而後訪問全部的接口時，必須攜帶sessionId
 * 才能夠訪問
 * @Author   Wdd
 * @DateTime 2017-03-13T10:34:03+0800
 * @param    {[type]} headers [description]
 */
Api.pt.setHeader = function(headers){
    headers = headers;
};

/**
 * [fire 發送ajax請求，this會綁定到每一個接口上]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:42:13+0800
 * @param    {[type]} pathParm [description]
 * @param    {[type]} payload [description]
 * @return   {[type]} [description]
 */
function fire(pathParm, payload){
    var url = util.render(this.path, pathParm);
    return util.ajax(url, this.method, payload);
}


/**
 * [for 遍歷全部接口]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:49:33+0800
 * @param    {[type]} var i [description]
 * @return   {[type]} [description]
 */
for(var i=0; i < Config.pathList.length; i++){

    Api.pt[Config.pathList[i].name] = {
        path: Config.basePath + Config.pathList[i].path,
        method: Config.pathList[i].method,
        fire: fire
    };
}

return new Api();
}

試用一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="api.js"></script>
    <script src="jquery-ajax.js"></script>
</head>
<body>

<script type="text/javascript">
    var saas = WellApi(api);

    saas.agentHeartBeat.fire({agentId: '5001@1011.cc', type:'a', something: 'test'})
    .done(function(res){
        console.log('心跳成功');
    })
    .fail(function(res){
        console.log('心跳失敗');
    });
    
    // 若是沒有參數要渲染到路徑上，那個第一個參數能夠傳空對象
    saas.setAgentState.fire({}, {status: 'Ready'})
    .done(function(res){
        console.log('設置成功');
    })
    .fail(function(res){
        console.log('設置失敗');
    });


</script>
</body>
</html>

注意點

fire(pathParm, payload)中的pathParm是最終會被渲染到請求的路徑裏面，而paylaod表明請求體。 javascript

例如：css

// 路徑這麼寫
/api/{{version}}/agent/{{id}}/{{somethingElse}}

// pathParm這樣寫
{version: 1, id: '2', somethingElse: 'sss'}

// 最終路徑會被渲染成
/api/1/agent/2/sss

path裏面不單單可放一個變量的，具體能夠參考mustache語法，上面代碼裏的render是以最簡單的實現。html

優勢與擴展

[優勢]：相似與promise的回調方式
[優勢]：增長一個接口只是須要增長一個配置文件，很方便
[擴展]：當前的ajax 的contentType我只寫了json，有興趣能夠擴展其餘的數據類型
[缺點]：沒有對函數參數進行校驗

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。