原生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请求的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。