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.imooc.com?uid=520&name=javanx，想获取可以直接用getUrlParam('uid')和getUrlParam('name')，就能拿到520和javanx了。
2. token
   token是会放到请求头里面去的，如果你的页面需要登录才能访问，后台应该需要一个key，也就是这里的token，登录成功后返回给你的key 你存到sessionStroage，然后取出来用就可以了。