前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >angular $http

angular $http

作者头像
j_bleach
发布2019-05-26 21:44:13
7410
发布2019-05-26 21:44:13
举报

对$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.kk = _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);
    };
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年11月22日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档