WebApi 的使用帶來了一個顯著的特點,對type有一定的要求。一般ajax的type無非就是兩種,GET和POST。如果用JSONP來跨域的話,就只能用 GET。但是現在WebApi來了,type的類型增加了一倍還要多。這個雖說問題不大,就是多個put、delete,看看要求掌握一下就可以了。但是 我覺得,這個總是要有個過程,另外寫代碼的時候還要想想是put還是post,萬一寫錯了,就會帶來不必要的麻煩。那麼能不能封裝一下呢?
jQuery的ajax使用其實已經很簡單了,但是還是需要設定幾個參數,那麼能不能在簡潔一點呢?或者說有沒有必要在封裝一下?
這個就是仁者見仁智者見智的問題了,另外還要看環境,看需求。簡單的需求確實沒有必要再次封裝,直接用就好了。如果需求複雜了一點,那麼封裝一下也是有必要的。
我們還是先來看看要求
1、 WebApi對type有要求。
2、 OData有自己的使用方式和文法格式。
在看看目標:
1、 使用簡單。
2、 便於更改。
3、 便於更換。
WebApi 剛才說過了,OData呢,確實很強大也很靈活,只是太靈活了,導致增加了學習成本和時間,那麼能不能也封裝一下,變成大家熟悉的方式呢?
思路
可能有人看到這個圖後回想:我k,用得著這麼複雜嗎?過度設計吧。其實這個看個人的經曆了,經曆過的就很容易理解,沒經曆過的就會很奇怪。最近在看清培兄的大作,就覺得挺奇怪,為啥要這麼設計呢?其實是我沒有那樣的經曆,也許以後就理解了吧。
封裝方式
公用屬性的封裝,就要看實際需求了,比如我的項目裡需要對租戶ID進行處理,對head裡的Authorization的處理(儲存token)、cors跨域的處理,訪問成功後的統一處理,失敗後的統一處理等。
查詢的封裝,這個就比較複雜一點,因為有OData,要對他的文法有一個通用的“翻譯”,讓不會OData 的人也能夠快速掌握。最後達到,讓人感覺不到有OData的存在。這樣做便於切換,OData是很強大,但是並不意味著一定會一直使用OData,哪天不 用了,用戶端的調用代碼總不能也跟著大變臉。由於剛剛接觸OData,所以封裝也是剛剛開始嘗試,肯定很多不完善的地方,感覺大家的多多指教!謝過了先。
添加和修改的封裝就比較簡單了,設定好type也就沒啥事情了,然後可以根據自己的實際情況加點協助工具功能,比如設定ID,設定租戶ID等。
刪除呢,看著簡單,但是實際上是相當的複雜。簡單的說,提交一個請求就完事了;複雜的說呢,是物理刪除還是邏輯刪除,刪除前要不要做資料完整性的判斷,要不要做串聯刪除。目前呢只是簡單的封裝了一下。
這次封裝,時間比較緊迫,另外對新項目的理解還不夠,比如api的路由規律還沒有掌握,本來還想封裝一下URL,但是只能暫時放棄了。
//對ajax的封裝 //最基礎的一層封裝Nature.Ajax = function(ajaxInfo) { //定義預設值 //type: "GET", //訪問方式。 //dataType: Nature.AjaxConfig.ajaxDataType, //資料類型:JSON、JSONP、text //cache: true, //是否緩衝,預設緩衝 //urlPara: {},//url後面的參數。一定會加在url後面,不會加到form裡。 //formData: {},//表單裡的參數。如果dataType是JSON,一定加在form裡,不會加在url後面;如果dataType是JSONP的話,只能加在url後面。 //url: //依靠上層指定 //補全ajaxInfo //cache if (typeof ajaxInfo.cache == "undefined") ajaxInfo.cache = false; //type if (typeof ajaxInfo.formData == "undefined") { //ajaxInfo.type = "GET"; } else { //ajaxInfo.type = "POST"; ajaxInfo.data = ajaxInfo.formData; } //處理URL和參數 if (typeof ajaxInfo.url != "undefined") { //var tmpUrlPara = ""; //var para = ajaxInfo.urlPara; //for (var key in para) { // tmpUrlPara += "&" + key + "=" + para[key]; //} //if (ajaxInfo.url.indexOf("?") >= 0) { // //原地址有參數,直接加 // ajaxInfo.url += tmpUrlPara; //} else { // //原地址沒有參數,變成?再加 // ajaxInfo.url += tmpUrlPara.replace("&", "?"); //} ajaxInfo.url = top.apiUrl + ajaxInfo.url.replace(/{TenantId}/g, top.tenantId); } //處理 beforeSend var beforeSend = ajaxInfo.beforeSend; ajaxInfo.beforeSend = function (XMLHttpRequest) { if (typeof beforeSend == "function") beforeSend(token); XMLHttpRequest.setRequestHeader("Authorization", "Bearer " + top.token); } //處理xhrFields if (typeof ajaxInfo.xhrFields == "undefined") { ajaxInfo.xhrFields = { //允許cors跨域訪問時添加cookie withCredentials: true }; } else { if (typeof ajaxInfo.xhrFields.withCredentials == "undefined") { ajaxInfo.xhrFields.withCredentials = true; } } //使用cors的方式實現跨域 jQuery.support.cors = true; //處理error var error = ajaxInfo.error; ajaxInfo.error = function(request, textStatus, errorThrown) { //訪問失敗,自動停止載入動畫,並且給出提示 //擷取返回的錯誤提示 var errMsg = request.responseText; if (typeof errMsg != "undefined") { errMsg = eval("(" + errMsg + ")"); errMsg = errMsg.message; } alert("提交" + ajaxInfo.title + "的時候發生錯誤!\r\n<br>" + errMsg); if (typeof top.spinStop == "function") top.spinStop(); if (typeof error == "function") error(); }; //處理success var success = ajaxInfo.success; ajaxInfo.success = function(data) { //顯示調試資訊 //if (typeof parent.DebugSet != "undefined") // parent.DebugSet(data.debug); if (typeof success == "function") success(data); }; //開始執行ajax $.ajax(ajaxInfo); };
//查詢資料Nature.Ajax.find = function (ajaxInfo) { ajaxInfo.type = "GET"; var info = ajaxInfo.pagerInfo ; //處理url,分頁和查詢 if (typeof info != "undefined") { if (typeof ajaxInfo.data == "undefined") ajaxInfo.data = {}; if (typeof info.pageSize != "undefined") ajaxInfo.data["$top"] = info.pageSize; if (typeof info.pageIndex != "undefined") ajaxInfo.data["$skip"] = (info.pageIndex - 1) * info.pageSize; if (typeof info.orderby != "undefined" && info.orderby != "") ajaxInfo.data["$orderby"] = info.orderby; } //處理查詢條件 //處理返回事件 $orderby var success = ajaxInfo.success; ajaxInfo.success = function (data) { // //判斷返回資訊 if (typeof data.message != "undefined") { alert(data.message); } else { if (typeof success == "function") success(data); } }; Nature.Ajax(ajaxInfo);};//添加資料 Nature.Ajax.add = function(ajaxInfo) { ajaxInfo.type = "POST"; //判斷data 。添加 id 和tenantId。 if(typeof ajaxInfo.data != "undefined"){ if(typeof ajaxInfo.data.id != "undefined"){ ajaxInfo.data.id = "00000000000000000000000000000000"; } if(typeof ajaxInfo.data.tenantId != "undefined"){ ajaxInfo.data.tenantId = top.tenantId; } } Nature.Ajax(ajaxInfo); }; //修改資料 Nature.Ajax.update = function(ajaxInfo) { ajaxInfo.type = "PUT"; //判斷data 。添加 tenantId。 if(typeof ajaxInfo.data != "undefined"){ if(typeof ajaxInfo.data.tenantId != "undefined"){ ajaxInfo.data.tenantId = top.tenantId; } } Nature.Ajax(ajaxInfo); }; //刪除資料 Nature.Ajax.del = function(ajaxInfo) { ajaxInfo.type = "DELETE"; Nature.Ajax(ajaxInfo); };