jQuery进阶：用最优雅的方式写ajax请求
NannieGarri
8年前
<h2>首先需要一个配置文件</h2> <pre> <code class="language-javascript">var api = { basePath: 'http://192.168.200.226:58080', pathList: [ { name: 'agentHeartBeat', path:'/api/csta/agent/heartbeat/{{agentId}}', method:'post' }, { name: 'setAgentState', path: '/api/csta/agent/state', method: 'post' }, { name: 'getAgents', path: '/user/agent/{{query}}', method: 'get' } ] }</code></pre> <h2>然后需要一个方法，把配置文件生成接口</h2> <pre> <code class="language-javascript">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 = /{{([^}]+)?}}/g; 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(); }</code></pre> <h2>试用一下</h2> <pre> <code class="language-javascript"><!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'}) .done(function(res){ console.log('心跳成功'); }) .fail(function(res){ console.log('心跳失败'); }); </script> </body> </html></code></pre> <h2>优点与扩展</h2> <ul> <li> <p>[优点]：类似与promise的回调方式</p> </li> <li> <p>[优点]：增加一个接口只是需要增加一个配置文件，很方便</p> </li> <li> <p>[扩展]：当前的ajax 的contentType我只写了json，有兴趣可以扩展其他的数据类型</p> </li> <li> <p>[缺点]：没有对函数参数进行校验</p> </li> </ul> <p> </p> <p>来自：https://segmentfault.com/a/1190000008678653</p> <p> </p>