封装jquery,ajax用于处理验证用户token是否失效

最近项目因为前期我未接触项目, 后期后台需要验证每个接口带token参数验证用户是否过期

通常我们在ajax success中对返回参数做处理。 但是封装js需要每个页面去调用,不可能在每个页面去对token是否过期做验证。

这里用到 jquery ajax中的dataFilter, 这里首先对ajax几种回调排一个序就很清楚了

**
beforeSend: 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
error :在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
dataFilter: 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
success: 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
complete: 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
**

这里我们用到的就 dataFilter这个函数。

具体代码如下:

jQuery.extend({
    newAjax: function(option) {
        var accessToken = localStorage.getItem('accessToken');
        var args = {
            type: "get",
            cache: false,
            dataType: "json", //默认后不显示图片上传中
            data: null,
            contentType: 'application/json',
            dataFilter: function(d) { // 处理返回参数,token 是否过期失效
                d = JSON.parse(d)
                //console.log(d)
                if(d.error == 'invalid_token') {
                    // TODO 这里是token失效的情况  跳登录页面;                   
                    return;
                }
                d = JSON.stringify(d)
                return d;
            },
            error: function(d) {
                console.log(d)
            }
        }

        $.each(option, function(key, value) {
            args[key] = value;
        });

        if(!args.url || args.url == undefined) {
            throw new Error('ajax参数错误!');
        };

        args.url = /^http/.test(args.url) ? args.url : API_SERVER + args.url; //是否以http开头               

        args.url = /\?/g.test(args.url) ?
            args.url + "&access_token=" + accessToken : //TODO  加token
            args.url + "?access_token=" + accessToken; //TODO  加token

        $.ajax(args);
    }
})

具体页面调用如下:

$.newAjax({
    url: url,
    type: 'post',
    data: JSON.stringify(param),
    success: function(d) {
        console.log(d);
        if(d.success == true) {

        } else {

        }
    },
    error: function(d) {

    }
})

大致就是这样, 这次的封装也是对自己接受应急需求时的一个提升, 希望可以分享出来

你可能感兴趣的:(js)