使用原生js封装一套ajax并设置token的函数

1.起源是老的方法在遇到新需求时有些不足,在老方法的基础上做了封装。

    一直说使用框架要学会看底层代码!看底层代码!看底层代码!重要的事情说三遍。这次整合方法把项目的底层翻了一遍,杂七杂八的看的头蒙。老前辈的思路也是6到不行,半蒙半醒ing~ 不多说 直接上代码:

    1.分析需求:

        1没有token时直接发送,有token时需要设置请求头.

        2返回的token信息存到缓存中,每次发送请求得到数据更新该缓存.项目的安全级别并不高,所以直接放到了缓存中.

    

window.callAPI = function (url,fajaxType,dataInput,onSuccess,onTimeout,onError,headerObj,aSynSta) {
    // FormData 对象
    var form = new FormData();
    // 可以增加表单数据
    form.append("msg",dataInput.msg); // 表单对象
    // XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    var xhrSyn=true;//默认异步
    if (typeof(aSynSta)!="undefined"&&aSynSta==false){
        xhrSyn=false;
    }
    xhr.open(fajaxType,url,xhrSyn);
    if (headerObj && typeof(headerObj)!="undefined" && headerObj.length>10)
    {
        var headerobjs=headerObj.split("#");
        for(var headnum=0;headnum<headerobjs.length;headnum++){
            var headObjstr=headerobjs[headnum].split(";");
            if(headObjstr.length==2){
                xhr.setRequestHeader(headObjstr[0],headObjstr[1]);
            }
        }
    }
    xhr.onload = function(){
        var res=JSON.parse(xhr.responseText);
        if(this.status >= 200 && this.status < 300){
            //返回的token保存到缓存中
            _setTokenInfo(xhr.getResponseHeader("packet_type"),xhr.getResponseHeader("packet_token"),xhr.getResponseHeader("packet_check"));
            onSuccess(res);

        }
    };
    if(onTimeout!=null&& typeof onTimeout == 'function'){
        xhr.ontimeout=onTimeout;
    }
    if(onError!=null && typeof onError == 'function'){
        xhr.onerror=onError;
    }
    xhr.send(form);
};

function _setTokenInfo(_packet_type,_packet_token,_packet_check){
    if(_packet_check && _packet_check!=null
        && _packet_token && _packet_token!=null
        && _packet_type && _packet_type!=null){
        var _storage=window.localStorage;
        var jsonObj=new Object();
        jsonObj.packet_type=_packet_type;
        jsonObj.packet_token=_packet_token;
        jsonObj.packet_check=_packet_check;
        jsonObj.fcompanyId=_packet_type;
        jsonObj.fdatetime=new Date().getTime();
        var objString=JSON.stringify(jsonObj);
        _storage.setItem("tokenInfo",objString);
    }
}
用jquery的话好像简单点,不过区别也不是太大,正好也练练手,熟悉熟悉原生ajax。

    


猜你喜欢

转载自blog.csdn.net/yummry/article/details/79881358
今日推荐