原生js 封装get ,post, delete 请求的实例
现在的项目中都在用VUE以及react等MVC，MVVM 框架。丢弃了原始的JQ。不可能为了个$.ajax();而把JQ引进来吧。
在vue1的开发中提供了vueResouce,vue2出来后明确提出了不在更新vueResouce而提供axios的方法。
在react的开发中提供fetch封装的方法。等等。但在工作与后台的交互中基本都是form表单的形式。于是自己封装了个
POST,GET,DELETE的请求方式。当然根据不同的公司，不同的方式。都可以自己扩展。目前这个只是针对自己所在公司而已。
functionapi(url,opt,methods){
returnnewPromise(function(resove,reject){
methods=methods||'POST';
varxmlHttp=null;
if(XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}else{
xmlHttp=newActiveXObject('Microsoft.XMLHTTP');
};
varparams=[];
for(varkeyinopt){
if(!!opt[key]||opt[key]===0){
params.push(key+'='+opt[key]);
}
};
varpostData=params.join('&');
if(methods.toUpperCase()==='POST'){
xmlHttp.open('POST',url,true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}elseif(methods.toUpperCase()==='GET'){
xmlHttp.open('GET',url+'?'+postData,true);
xmlHttp.send(null);
}elseif(methods.toUpperCase()==='DELETE'){
xmlHttp.open('DELETE',url+'?'+postData,true);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
resove(JSON.parse(xmlHttp.responseText));
}
};
});
}
exportdefaultapi;
以上这篇原生js封装get,post,delete请求的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。