原生JS封装ajax以及request
一、封装原生的xhr为ajax类
xhr以及用法见之前的文章1、根据url确定请求的头部以及别的信息。
var _headerConfig = {}; if(url.indexOf('getcaptcha') !== -1) { _headerConfig = { Accept: 'image/png', responseType: 'arraybuffer', } } else if(url.indexOf('files/upload') !== -1) { _headerConfig = { 'Content-Type': 'multipart/form-data', responseType: 'json', } } else { _headerConfig = { 'Content-Type': 'application/json', Accept: 'application/json', responseType: 'json', } }
2、根据参数信息中的信息,确定请求的方法以及请求的参数
if("method" in options) { options.method = options.method.toUpperCase(); } else { options.method = "GET"; } if(options.method !== "GET") { if(!(options.params instanceof FormData)) { options.params = JSON.stringify(options.params); } }
3、打开xhr并且根据头部头部以及其他信息设置,发送
this.xhr.open(options.method, url, true); for(var _i in _headerConfig) { if(_i === 'responseType') { this.xhr.responseType = _headerConfig[_i]; } else { this.xhr.setRequestHeader(_i, _headerConfig[_i]); } } if(token) { this.xhr.setRequestHeader("token", token); } this.xhr.send(options.params);
4、实现链式编程:在每个函数的结尾return this;
5、实现完成后执行回调
这个问题结合链式编程一度的卡了很久。
ajax.prototype.complete = function(completeFunction) { this.xhr.onreadystatechange = function(e) { if(this.readyState === 4) { completeFunction(this); } } return this; }
二、封装实用性的request类
在项目中经常需要将request进行封装,使用ajax类发起请求。拼接请求的地址函数。1、创建拼接方法。
var requstUrl = { baseURL: URL, API: { NEWS: '/news', LOGIN: '/', }, // api为API中的参数,用于拼接url // method为API后的地址,用于拼接url最后面的东西。 // params为get请求需要的参数 createUrl: function(api, method, params) { var _requestUrl = this.baseURL + this.API[api] + method; if(params) { for(var i of params) { _requestUrl += (_requestUrl.indexOf("?") == -1 ? "?" : "&"); _requestUrl += name + "=" + value; } } return _requestUrl; } }
2、确定各个请求。
function handleRequest() { } // get请求带参数。 handleRequest.prototype.getDataUseGet = function(api, method, params) { var _url; var ajax = new Ajax(); var token = sessionStorage.getItem('token'); if(params) { _url = requstUrl.createUrl(api, method, params); } else { _url = requstUrl.createUrl(api, method); } return ajax.request(_url, { method: 'GET', params: params }, token); } // get请求不带token handleRequest.prototype.getDataUseGetWithoutToken = function(api, method, params) { var _url; var ajax = new Ajax(); if(params) { _url = requstUrl.createUrl(api, method, params); } else { _url = requstUrl.createUrl(api, method); } return ajax.request(_url, { method: 'GET', params: params }); } // post请求带token handleRequest.prototype.getDataUsePost = function(api, method, params) { var _url = requstUrl.createUrl(api, method); var token = sessionStorage.getItem('token'); var ajax = new Ajax(); console.log(createAjaxObj(_url, { method: 'POST', params: params }, token)); return ajax.request(_url, { method: 'POST', params: params }, token); } // post请求不带token handleRequest.prototype.getDataUsePostWithOutToken = function(api, method, params) { var _url = requstUrl.createUrl(api, method); var ajax = new Ajax(); return ajax.request(_url, { method: 'POST', params: params }); } // put请求带token handleRequest.prototype.getDataUsePut = function(api, method, params) { var _url = requstUrl.createUrl(api, method); var token = sessionStorage.getItem('token'); var ajax = new Ajax(); return ajax.request(_url, { method: 'PUT', params: params }, token); } // put请求不带token handleRequest.prototype.getDataUsePutWithOutToken = function(api, method, params) { var _url = requstUrl.createUrl(api, method); var ajax = new Ajax(); return ajax.request(_url, { method: 'PUT', params: params }); } // delete请求带token handleRequest.prototype.deleteData = function(api, method, params) { var _url = requstUrl.createUrl(api, method); var token = sessionStorage.getItem('token'); var ajax = new Ajax(); return ajax.request(_url, { method: 'DELETE', params: params }, token); }这个方法感觉可以再次进行封装。
三、使用
1、使用代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script src="ip.js" type="text/javascript"></script> <script src="xhr.js" type="text/javascript"></script> <script src="request.js" type="text/javascript"></script> <script type="text/javascript"> var data = { "captcha": "string", "password": "string", "username": "string" }; var test = new handleRequest(); test.getDataUsePostWithOutToken('LOGIN', 'login',data).complete(function(result) { console.log(result) }) </script> </html>
2、结果
成功发起请求。
完整代码点击查看
以上。
相关推荐
TONIYH 2020-06-05
lyqdanang 2020-08-16
坚持着执着 2020-06-16
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07