原生js 封装get ,post, delete 请求的实例
程序员文章站
2022-05-14 19:19:26
现在的项目中都在用vue 以及react 等mvc, mvvm 框架。 丢弃了原始的jq 。不可能为了个$.ajax();而把jq引进来吧。
在vue1的开发...
现在的项目中都在用vue 以及react 等mvc, mvvm 框架。 丢弃了原始的jq 。不可能为了个$.ajax();而把jq引进来吧。
在vue1的开发中 提供了 vueresouce, vue2 出来后明确提出了不在更新vueresouce 而提供axios 的方法。
在react 的开发中提供fetch 封装的方法。等等。但在工作与后台的交互中基本都是form表单的形式。于是自己封装了个
post,get,delete 的请求方式。当然根据不同的公司,不同的方式。都可以自己扩展。目前这个只是针对自己所在公司而已。
function api(url,opt,methods) { return new promise(function(resove,reject){ methods = methods || 'post'; var xmlhttp = null; if (xmlhttprequest) { xmlhttp = new xmlhttprequest(); } else { xmlhttp = new activexobject('microsoft.xmlhttp'); }; var params = []; for (var key in opt){ if(!!opt[key] || opt[key] === 0){ params.push(key + '=' + opt[key]); } }; var postdata = 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); }else if (methods.touppercase() === 'get') { xmlhttp.open('get', url + '?' + postdata, true); xmlhttp.send(null); }else if(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)); } }; }); } export default api;
以上这篇原生js 封装get ,post, delete 请求的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
浅谈Java代码的 微信长链转短链接口使用 post 请求封装Json(实例)
-
Android下通过httpClient发送GET和POST请求的实例代码
-
C#模拟http 发送post或get请求的简单实例
-
Vue resource中的GET与POST请求的实例代码
-
nodejs 使用http进行post或get请求的实例(携带cookie)
-
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
-
Android下通过httpClient发送GET和POST请求的实例代码
-
原生js 封装get ,post, delete 请求的实例
-
原生js封装添加class,删除class的实例
-
Python3.6通过自带的urllib通过get或post方法请求url的实例