实现一个适用于不同环境的ajax配置封装

问题描述

前端写页面时，需实时联调接口。
但后端接口部署在后端机器，
和前端页面不同域，需跨域请求，得JSONP。
或者后端机器配置跨域资源共享Cross-Origin Resource Sharing (CORS) 。

发布到线上，假设前后端都在同个域下，请求又不跨域。
如果我们开发时一套代码（跨域的配置），发到线上又一套代码（不跨域）。
这会导致代码难以维护。

需求来了

1. 封装一个jQuery ajax配置，统一开发环境和线上环境的请求配置。
2. 统一处理服务器返回数据的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"},
});