vue的Http請求攔截及處理


/*公共加載遮罩*/
(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;

    });
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM