優(yōu)雅的封裝ajax，含跨域

之前寫過一篇 先定一個小目標(biāo)，自己封裝個ajax，是基于原生js的，也就是jquery中ajax的簡化版本實現(xiàn)的思路。眾所周知，jquery的ajax是項目中最常用的請求后臺的方式，也算是封裝的很完美的api了，然而漸漸的我們會發(fā)現(xiàn)，其實還可以根據(jù)實際項目需要更優(yōu)雅的進(jìn)行一層封裝，先看調(diào)用方式：

熟悉EasyUI的猿們可能會覺得這種方式有點熟悉，沒錯，我就是看easyUI得到的啟發(fā)，也顯然這樣的方式更利于前端做判斷，邏輯更清晰明了。那么代碼后面是怎樣封裝的呢，我這里貼出核心的代碼以及思路。

思路

將后臺返回的不同業(yè)務(wù)狀態(tài)碼以函數(shù)回調(diào)的形式代替，減少if的多層級判斷。同時將通用的錯誤狀態(tài)碼邏輯（如這里的900狀態(tài)是通用異常）、通用的請求參數(shù)（如client客戶端來源，是否需要token證書)、請求前置觸發(fā)操作(如加載中動畫)等等進(jìn)行統(tǒng)一處理，既減少的代碼量，同時又更利于維護(hù)。

封裝的js代碼

var LI = {    //發(fā)送get請求
    GET: function(options){        this.ajax(options,'get');
    },    //發(fā)送post請求
    POST: function(options){        this.ajax(options,'post');
    },
    ajax: function(options,type){        var opts = {
            isCommonBefore: true, //默認(rèn)是通用的加載中動畫
            client: 1, //TODO這里應(yīng)該根據(jù)內(nèi)核判斷
            isCors: false,//默認(rèn)不跨域
            isLogin: false
        }
        
        $.extend(true, options, opts || {});        
        //跨域，將請求地址 和 請求參數(shù) 都作為參數(shù)傳遞調(diào)用后臺固定的跨域接口
        if (opts.isCors) {
          &n
        
		

        		
網(wǎng)友評論
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		學(xué)習(xí)是年輕人改變自己的最好方式