一.首先需要一个配置文件
var api = {
basePath: ‘http://192.168.0.1:8081’,
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’
}
]
}
二.需要一个方法，把配置文件生成接口
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’
});
},
/**
* 主要用于将 /users/{{userId}} 和{userId: ‘89898’}转换成/users/89898，和mastache语法差不多，
* 当然我们没必要为了这么小的一个功能来引入一个模板库query字符串可以当做一个参数传递进来
*/
render: function(tpl, data){
var re = /{{([^}]+)?}}/g;
var match = ”;
while(match = re.exec(tpl)){
tpl = tpl.replace(match[0],data[match[1]]);
}
return tpl;
}
};
/**
* 设置头部信息的方法
* 有些方法需要特定的头部信息，例如登录之后才能获取sesssionId,然后访问所有的接口时，必须携带sessionId才可以访问
*/
Api.pt.setHeader = function(headers){
headers = headers;
};
/**
* 发送ajax请求，this会绑定到每个接口上
*/
function fire(pathParm, payload){
var url = util.render(this.path, pathParm);
return util.ajax(url, this.method, payload);
}
/**
* 遍历所有接口
*/
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: ‘
[email protected]‘})
.done(function(res){
console.log(‘成功’);
})
.fail(function(res){
console.log(‘失败’);
});
</script>
</body>
</html>
四.优点
1.类似与promise的回调方式
2.增加一个接口只是需要增加一个配置文件，很方便
五.扩展
1.当前的ajax 的contentType我只写了json，有兴趣可以扩展其他的数据类型
六.缺点
1.没有对函数参数进行校验
转载请注明来源网站:blog.ytso.com谢谢！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/14950.html