问题描述
前端写页面时，需实时联调接口。
但后端接口部署在后端机器，
和前端页面不同域，需跨域请求，得JSONP。
或者后端机器配置跨域资源共享Cross-Origin Resource Sharing (CORS) 。
发布到线上，假设前后端都在同个域下，请求又不跨域。
如果我们开发时一套代码（跨域的配置），发到线上又一套代码（不跨域）。
这会导致代码难以维护。
需求来了
- 封装一个jQuery ajax配置，统一开发环境和线上环境的请求配置。
- 统一处理服务器返回数据的meta信息。
撸函数
因为不同的环境，要配置不同的ajax参数。
所以要维护一个对象，进行环境配置映射。
为了不让每次请求回调都去判断接口调用成功与否，
返回的ajax promise对象，都已经做过meta信息处理。
const monika = function(env){
return function(candidate){
let envObj = candidate[env];
return function(userObj){
return $.ajax($.extend(true, {},envObj,userObj)).then(function(data){
let dfd = $.Deferred();
if(data.success){
dfd.resolve(data.content);
}
else{
alert(data.errorMsg);
dfd.reject(data);
}
return dfd;
});
}
}
};
上述代码，还有个优化点是，meta信息处理可以提取出来，让用户配置。
然后我们就可以根据不同的环境，写不同的ajax配置对象了。
let DB = "";
if (运行环境 == "开发环境") {
DB = monika("develop");
}
else {
DB = monika("online");
}
return DB({
"develop": {url: "aaa.jsonp", type: "get", dataType: "jsonp"},
"online": {url: "server/aaa.json", type: "post", dataType: "json"},
});
