亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Jquery Ajax簡單封裝(集中錯誤、請求loading處理)

对Jquery Ajax做了简单封装,错误处理,请求loading等,喜欢的可以收藏运用到项目中。

技术层面没有什么好说的,请求是用jquery ajax,弹出层是用layer,大家可以随意替换。比如你用weui,也可以$.toast()等。
用jquery的Deferred来传递成功或失败的状态。

var http = {
        config = {
            api: '', // 请求地址前缀
            token: 'xxxx-xxx-xxxxx'
        },
        /** url: 请求接口地址,
            type: 请求类型 POST GET,
            json: 数据请求方式,
            mask: 是否有loading,
            data: 请求参数
         */
        ajax(options) {
            var loading = '';
            let def = $.Deferred();
            if (options.mask) {
                loading = layer.msg('加载中', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                });
            }
            $.ajax({
                url: config.api + options.url,
                data: options.data,
                type: options.type,
                headers: {
                    'x-auth-token': config.token
                },
                contentType: options.json ? 'application/json;charset=UTF-8' : 'application/x-www-form-urlencoded'
            }).then(function(rsp) {
                def.resolve(rsp);
                setTimeout(function(){
                    layer.close(loading);
                },100)
            }, function(error) {
                if(error.status==504){
                    layer.msg('请求超时,请重试', {
                        icon: 5
                    });
                }else if(error.responseText){
                    var err = JSON.parse(error.responseText);
                    var code = err.code; // 错误码
                    var emsg = err.message; // 错误内容提示(字符串)
                    switch (code) {
                        case 2022: // 2022 掉线,重新登录
                            layer.msg(emsg, {
                                icon: 5
                            }, function() {
                                location.href = '/login.html';
                            });
                            break;
                    }
                }
                def.reject(error);
                setTimeout(function(){
                    layer.close(loading);
                },100)
            });
            return def;
        },
        getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null){
                return unescape(r[2]);
            };
            return null; 
        }
    }

调用实例(引入上面代码):

http.ajax({
    url: '/user/login',
    type: 'POST',
    json: false,
    mask: true, //是否有loading,
    data: {
        username: 'javanx',
        password: '123456'
    }
}).then(function(data){
    console.log(data);
    // 成功回调,data是成功回调参数
}, function(err){
    console.log(err);
    // 错误回调,err是错误回调参数
    // 这里不处理错误也可以,上面都有集中处理错误,会tips
})

最后解释一下

  1. getUrlParam
    是用来获取页面url参数的值的。
    如当前页面url是 www.xianlaiwan.cn?uid=520&name=javanx,想获取可以直接用getUrlParam('uid')和getUrlParam('name'),就能拿到520和javanx了。
  2. token
    token是会放到请求头里面去的,如果你的页面需要登录才能访问,后台应该需要一个key,也就是这里的token,登录成功后返回给你的key 你存到sessionStroage,然后取出来用就可以了。
點擊查看更多內容
2人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
1.5萬
獲贊與收藏
5278

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消