vue的Http请求拦截及处理

Posted 2020-10-26 故事里的牧羊人

/*公共加载遮罩*/
(function($) {
    $.fn.jqLoading = function(option) {
        var defaultVal = {
            backgroudColor : "#ECECEC",// 背景色
            backgroundImage : "/exchange/resources/images/loading.gif",// 背景图片
            text : "",// 文字正在加载中，请耐心等待...
            width : ‘1.32rem‘,// 宽度
            height : ‘1.32rem‘,// 高度
            type : 0
            // 0全部遮，1 局部遮

        };
        var opt = $.extend({}, defaultVal, option);

        if (opt.type == 0) {
            // 全屏遮
            openLayer();
        } else {
            // 局部遮(当前对象应为需要被遮挡的对象)
            openPartialLayer(this);
        }

        // 销毁对象
        if (option === "destroy") {
            closeLayer();
        }

        // 设置背景层高
        function height() {
            var scrollHeight, offsetHeight;
            // handle IE 6
            if ($.support.msie && $.support.version < 7) {
                scrollHeight = Math.max(document.documentElement.scrollHeight,
                    document.body.scrollHeight);
                offsetHeight = Math.max(document.documentElement.offsetHeight,
                    document.body.offsetHeight);
                if (scrollHeight < offsetHeight) {
                    return $(window).height();
                } else {
                    return scrollHeight;
                }
                // handle "good" browsers
            } else if ($.support.msie && $.support.version == 8) {
                return $(document).height() - 4;
            } else {
                return $(document).height();
            }
        };

        // 设置背景层宽
        function width() {
            var scrollWidth, offsetWidth;
            // handle IE
            if ($.support.msie) {
                scrollWidth = Math.max(document.documentElement.scrollWidth,
                    document.body.scrollWidth);
                offsetWidth = Math.max(document.documentElement.offsetWidth,
                    document.body.offsetWidth);
                if (scrollWidth < offsetWidth) {
                    return $(window).width();
                } else {
                    return scrollWidth;
                }
                // handle "good" browsers
            } else {
                return $(document).width();
            }
        }
        ;

        /* ==========全部遮罩========= */
        function openLayer() {
            // 背景遮罩层
            var layer = $("<div id=‘layer‘></div>");
            layer.css({
                zIndex : 9998,
                position : "absolute",
                height : height() + "px",
                width : width() + "px",
                background : "black",
                top : 0,
                left : 0,
                filter : "alpha(opacity=30)",
                opacity : 0.3
            });

            // 图片及文字层
            var content = $("<div id=‘content‘></div>");
            content.css({
                textAlign : "left",
                position : "fixed",
                zIndex : 9999,
                height : opt.height + "px",
                width : opt.width + "px",
                top : "50%",
                left : "50%",
                /*verticalAlign : "middle",*/
                background : opt.backgroudColor,
                /*borderRadius : "8px",*/
                /*fontSize : "13px"*/
            });

            content
                .append("<img style=‘vertical-align:middle;width:1.32rem;height:1.32rem;margin-left: -.66rem;margin-top: -.66rem;"
                    /*+ (opt.height / 4)*/
                    + "/*px; 0 0 5px;margin-right:5px;*/‘ src=‘"
                    + opt.backgroundImage
                    + "‘ /><span style=‘text-align:center; vertical-align:middle;‘>"
                    + opt.text + "</span>");
            $("body").append(layer).append(content);
            var top = content.css("top").replace(‘px‘, ‘‘);
            var left = content.css("left").replace(‘px‘, ‘‘);
            content.css("top", (parseFloat(top) - opt.height / 2)).css("left",
                (parseFloat(left) - opt.width / 2));

            return this;
        }

        // 销毁对象
        function closeLayer() {
            $("#layer,#content,#partialLayer").remove();
            return this;
        }

        /* ==========局部遮罩========= */
        function openPartialLayer(obj) {

            var eheight = $(obj).css("height");// 元素带px的高宽度
            var ewidth = $(obj).css("width");
            var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响
            var left = $(obj).offset().left;

            var layer = $("<div id=‘partialLayer‘></div>");
            layer.css({
                style : ‘z-index:9998‘,
                position : "absolute",
                height : eheight,
                width : ewidth,
                background : "black",
                top : top,
                left : left,
                filter : "alpha(opacity=60)",
                opacity : 0.6,
                borderRadius : "3px",
                dispaly : "block"
            });
            $("body").append(layer);

            return this;
        }
    };

})(jQuery)

/*全局设置ajax请求拦截*/
Vue.http.interceptors.push(function(request, next){
    console.log(this)//此处this为请求所在页面的Vue实例

    //是否input提交
    /*if(document.getElementsByTagName(‘input‘).length > 0){
        var validator = new TestData();
        if(!validator.TestAll()){
            return ;
        };
    }*/
    // modify request
    //在请求之前可以进行一些预处理和配置
    request.method = ‘POST‘;
    $.fn.jqLoading();
    // continue to next interceptor
    next(function(response,a,b){//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法
        // 取消等待效果
        $.fn.jqLoading("destroy");
        /*var sessionstatus = response.getResponseHeader("sessionstatus");*/
        if(response.data.result == ‘00‘){
            console.log(response.data.message);
        }else{
            console.log(response.data.message)
        }
        var sessionstatus = response.headers.get("sessionstatus");
        if (sessionstatus == "timeout") {
          
        }if (sessionstatus == "nopower") {
            /*jsalert(‘用户无权限‘, ‘exception‘);*/
            wrap.alert(‘用户无权限‘);
        }

        return response;

    });
});