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

最新推荐文章于 2025-05-15 10:54:28 发布

原创最新推荐文章于 2025-05-15 10:54:28 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

随手记论文专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个封装的Ajax请求方法，能够根据需求自动处理Token，并将获取的Token存储在本地缓存中，以便后续请求使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。