AngularJs中$http再次封裝
阿新 • • 發佈:2019-01-04
對$http定義一個service服務
/** * http 自定義封裝 */ ngServices.factory('httpService', function ($http, $timeout, $q) { // 預設引數 var _httpDefaultOpts = { method: 'POST', // GET/DELETE/HEAD/JSONP/POST/PUT url: '', params: {}, // 拼接在url的引數 data: {}, cache: false, // boolean or Cache object limit: true, //是否節流 timeout: "httpTimeout", // 節流變數名 timeoutTime : 100, isErrMsg: false,// 錯誤提示 isErrMsgFn : null,// 錯誤提示函式 checkCode: true, // 是否校驗code before: function(){}, // ajax 執行開始 執行函式 end: function(){}, // ajax 執行結束 執行函式 error: function(){}, // ajax 執行失敗 執行函式 success: function(data){}, // ajax 執行成功 執行函式 checkCodeError : function(code,errMsg, data){} // ajax 校驗code失敗 執行函式 }; var _httpTimeoutArray = {"httpTimeout" : null};//ajax節流使用的定時器 集合 var _isErrMsgFn = function (opts) { if (angular.isFunction(opts.isErrMsgFn)) { opts.isErrMsgFn(); } else { alert("抱歉!因為操作不能夠及時響應,請稍後在試..."); } }; // http請求之前執行函式 var_httpBefore = function (opts) { if (angular.isFunction(opts.before)) { opts.before(); } }; // http請求之後執行函式 var _httpEnd = function (opts) { if (angular.isFunction(opts.end)) { opts.end(); } if(opts.limit){ $timeout.cancel(_httpTimeoutArray[opts.timeout]); } }; // 響應錯誤判斷 var _responseError = function (data, opts) { // public.js return checkCode(data, opts); }; // http 請求執行過程封裝 deferred :http 鏈式請求延遲物件 var _httpMin = function (opts, deferred) { _httpBefore(opts); $http({ method: opts.method, url: opts.url, params: opts.params, data: opts.data }).success(function(data,header,config,status){ //響應成功 // 許可權,超時等控制 if( opts.checkCode && !_responseError(data, opts) ) { return false; } // 請求成功回撥函式 if(opts.success) { opts.success(data,header,config,status); } if (deferred) { deferred.resolve(data,header,config,status); //任務被成功執行 } _httpEnd(opts); }).error(function(data,header,config,status){ //處理響應失敗 if(opts.isErrMsg){ _isErrMsgFn(); } opts.error(data,header,config,status); if (deferred) { deferred.reject(data,header,config,status); //任務未被成功執行 } _httpEnd(opts); }); }; // http請求,內含節流等控制 var _http = function (opts, deferred) { opts = $.extend({}, _httpDefaultOpts, opts); var result; if (opts.limit) { $timeout.cancel(_httpTimeoutArray[opts.timeout]); _httpTimeoutArray[opts.timeout] = $timeout(function () { result = _httpMin(opts, deferred); }, opts.timeoutTime); } else { result = _httpMin(opts, deferred); } }; // http 鏈式請求 var _linkHttpMin = function (opts, deferred) { _http(opts, deferred); }; return { /** * http請求 * @param opts */ http: function (opts) { _http(opts); }, /** * http鏈式請求 * @param opts * @param deferred * @returns {deferred.promise|{then, catch, finally}} */ linkHttp : function (opts, deferred) { deferred = deferred || $q.defer(); _linkHttpMin(opts, deferred); return deferred.promise; } }; });
自定義響應碼校驗
/** * code 響應變數定義 * @type {{SUCCESS: number, ERROR: number, SESSION_TIME_OUT: number}} */ var CODESTATUS = { SUCCESS: 10000, ERROR: -10000, SESSION_TIME_OUT: -10001}; /** * 判斷 code * @param data */ function checkCode(data, opts){ var _data ; var _isCode = true; if(isEmpty(data)){ _isCode = false; } else { if( typeof data == "string" ){ if(data.indexOf("code") > -1){ _data = jQuery.parseJSON(data); }else{ _isCode = false; } }else{ _data = data; } } if( _isCode && isNotEmpty(_data.code) ){ if( _data.code == CODESTATUS.IS_NOT_LOGIN || _data.code == CODESTATUS.SESSION_TIME_OUT){// 會話超時 // 超時處理 console.log("超時或未登入"); window.location.href = _data.value; return false; } else if( _data.code == CODESTATUS.IS_ERROR ){ console.log("連線錯誤,請稍等!"); if(opts.checkCodeError){ opts.checkCodeError( _data.code, "連線錯誤,請稍等!", _data); } return false; } else if( _data.code == CODESTATUS.USER_AUTH_FAIL ){ console.log("使用者認證失敗!"); if(opts.checkCodeError){ opts.checkCodeError( _data.code, "使用者認證失敗!", _data); } return false; } else if( _data.code == CODESTATUS.PARAM_IS_ERROR ){ console.log("無效的請求引數"); if(opts.checkCodeError){ opts.checkCodeError( _data.code, "無效的請求引數!", _data); } return false; } } return true; }
呼叫例子
ngServices.service('errorService', function (httpService) { this.getError404 = function (options) { console.log("getError404"); var _opts = $.extend({ timeout : 'getError404Timeout' },options); var _url = appUrl + "code.json"; var _data = JSON.stringify({ "body": {} }); _opts.url = _url; _opts.data = _data; httpService.http(_opts); }; this.getError404Link = function (options) { console.log("getError404Link"); var _opts = $.extend({ timeout : 'getError404Timeout' },options); var _url = appUrl + "code.json"; var _data = JSON.stringify({ "body": {} }); _opts.url = _url; _opts.data = _data; return httpService.linkHttp(_opts); }; });