問(wèn)題描述

前端寫頁(yè)面時(shí)，需實(shí)時(shí)聯(lián)調(diào)接口。
但后端接口部署在后端機(jī)器，
和前端頁(yè)面不同域，需跨域請(qǐng)求，得JSONP。
或者后端機(jī)器配置跨域資源共享Cross-Origin Resource Sharing (CORS) 。

發(fā)布到線上，假設(shè)前后端都在同個(gè)域下，請(qǐng)求又不跨域。
如果我們開(kāi)發(fā)時(shí)一套代碼（跨域的配置），發(fā)到線上又一套代碼（不跨域）。
這會(huì)導(dǎo)致代碼難以維護(hù)。

需求來(lái)了

1. 封裝一個(gè)jQuery ajax配置，統(tǒng)一開(kāi)發(fā)環(huán)境和線上環(huán)境的請(qǐng)求配置。
2. 統(tǒng)一處理服務(wù)器返回?cái)?shù)據(jù)的meta信息。

擼函數(shù)

因?yàn)椴煌沫h(huán)境，要配置不同的ajax參數(shù)。
所以要維護(hù)一個(gè)對(duì)象，進(jìn)行環(huán)境配置映射。

為了不讓每次請(qǐng)求回調(diào)都去判斷接口調(diào)用成功與否，
返回的ajax promise對(duì)象，都已經(jīng)做過(guò)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;
      });
        }

    }
};

上述代碼，還有個(gè)優(yōu)化點(diǎn)是，meta信息處理可以提取出來(lái)，讓用戶配置。

然后我們就可以根據(jù)不同的環(huán)境，寫不同的ajax配置對(duì)象了。

let DB = "";
if (運(yùn)行環(huán)境 == "開(kāi)發(fā)環(huán)境") {
  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"},
});