摘要:一封裝原生的為類以及用法見(jiàn)之前的文章根據(jù)確定請(qǐng)求的頭部以及別的信息。二封裝實(shí)用性的類在項(xiàng)目中經(jīng)常需要將進(jìn)行封裝,使用類發(fā)起請(qǐng)求。請(qǐng)求不帶請(qǐng)求帶請(qǐng)求不帶請(qǐng)求帶請(qǐng)求不帶請(qǐng)求帶這個(gè)方法感覺(jué)可以再次進(jìn)行封裝。完整代碼點(diǎn)擊查看以上。
一、封裝原生的xhr為ajax類
xhr以及用法見(jiàn)之前的文章1、根據(jù)url確定請(qǐng)求的頭部以及別的信息。
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、根據(jù)參數(shù)信息中的信息,確定請(qǐng)求的方法以及請(qǐng)求的參數(shù)
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、打開(kāi)xhr并且根據(jù)頭部頭部以及其他信息設(shè)置,發(fā)送
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、實(shí)現(xiàn)鏈?zhǔn)骄幊蹋涸诿總€(gè)函數(shù)的結(jié)尾return this; 5、實(shí)現(xiàn)完成后執(zhí)行回調(diào)
這個(gè)問(wèn)題結(jié)合鏈?zhǔn)骄幊桃欢鹊目撕芫谩?/p>
ajax.prototype.complete = function(completeFunction) { this.xhr.onreadystatechange = function(e) { if(this.readyState === 4) { completeFunction(this); } } return this; }二、封裝實(shí)用性的request類
在項(xiàng)目中經(jīng)常需要將request進(jìn)行封裝,使用ajax類發(fā)起請(qǐng)求。拼接請(qǐng)求的地址函數(shù)。1、創(chuàng)建拼接方法。
var requstUrl = { baseURL: URL, API: { NEWS: "/news", LOGIN: "/", }, // api為API中的參數(shù),用于拼接url // method為API后的地址,用于拼接url最后面的東西。 // params為get請(qǐng)求需要的參數(shù) 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、確定各個(gè)請(qǐng)求。
function handleRequest() { } // get請(qǐng)求帶參數(shù)。 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請(qǐng)求不帶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請(qǐng)求帶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請(qǐng)求不帶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請(qǐng)求帶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請(qǐng)求不帶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請(qǐng)求帶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); }
這個(gè)方法感覺(jué)可以再次進(jìn)行封裝。三、使用 1、使用代碼
2、結(jié)果
成功發(fā)起請(qǐng)求。
完整代碼點(diǎn)擊查看
以上。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/99266.html
摘要:請(qǐng)求默認(rèn)會(huì)攜帶同源請(qǐng)求的,而跨域請(qǐng)求則不會(huì)攜帶,設(shè)置的的屬性為將允許攜帶跨域。類型請(qǐng)求成功后的回調(diào)函數(shù)。另外,同樣提供了在環(huán)境下的支持,可謂是網(wǎng)絡(luò)請(qǐng)求的首選方案。當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí),才會(huì)標(biāo)記為,如跨域不存在,網(wǎng)絡(luò)異常等會(huì)觸發(fā)。 一、前端進(jìn)行網(wǎng)絡(luò)請(qǐng)求的關(guān)注點(diǎn) 大多數(shù)情況下,在前端發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求我們只需關(guān)注下面幾點(diǎn): 傳入基本參數(shù)(url,請(qǐng)求方式) 請(qǐng)求參數(shù)、請(qǐng)求參數(shù)類型 設(shè)...
摘要:我們都知道因?yàn)橥床呗缘膯?wèn)題,瀏覽器的請(qǐng)求是可能隨便跨域的一定要有跨域頭或者借助,但是,中可以設(shè)置為不跨域,如下所示這樣之后我們會(huì)得到一個(gè)為的返回。 免費(fèi)幫忙內(nèi)推阿里等各大IT公司的崗位,有興趣可以帶簡(jiǎn)歷加微信angeltune 引言 前端技術(shù)真是一個(gè)發(fā)展飛快的領(lǐng)域,我三年前入職的時(shí)候只有原生XHR和Jquery ajax,我們還曾被JQuery 1.9版本版本以下不支持大文件請(qǐng)求這個(gè)...
摘要:博客地址使用模塊化工具打包自己開(kāi)發(fā)的庫(kù)文章中有提到,當(dāng)時(shí)需要寫(xiě)一個(gè),監(jiān)控小程序的后臺(tái)接口調(diào)用和頁(yè)面報(bào)錯(cuò),今天就來(lái)說(shuō)下實(shí)現(xiàn)原理吧原理之前也做過(guò)瀏覽器端的數(shù)據(jù)埋點(diǎn)上報(bào),其實(shí)原理大同小異通過(guò)劫持原始方法,獲取需要上報(bào)的數(shù)據(jù),最后再執(zhí)行原始方法,這 博客地址 《使用模塊化工具打包自己開(kāi)發(fā)的JS庫(kù)》文章中有提到,當(dāng)時(shí)需要寫(xiě)一個(gè)SDK,監(jiān)控小程序的后臺(tái)接口調(diào)用和頁(yè)面報(bào)錯(cuò),今天就來(lái)說(shuō)下實(shí)現(xiàn)原理吧! ...
摘要:本文將帶你了解不同請(qǐng)求的原理,以及如何為項(xiàng)目選擇合適的請(qǐng)求庫(kù)。小程序年微信小程序上線,隨后各大平臺(tái)都推出自己的小程序。下面為目前較火的請(qǐng)求庫(kù)。支持微信小程序和瀏覽器是一個(gè)基于的請(qǐng)求庫(kù),可以用在微信小程序和瀏覽器中,對(duì)上述平臺(tái)都做了兼容。 以前前端提到網(wǎng)絡(luò)請(qǐng)求通常是指瀏覽器,但現(xiàn)在隨著 Node.js、小程序的出現(xiàn),網(wǎng)絡(luò)請(qǐng)求不再局限于瀏覽器。本文將帶你了解不同請(qǐng)求的原理,以及如何為項(xiàng)目選...
閱讀 1830·2021-11-23 09:51
閱讀 950·2021-10-08 10:05
閱讀 3434·2021-09-26 09:55
閱讀 1045·2021-09-22 15:21
閱讀 1635·2021-09-09 09:33
閱讀 1274·2019-08-30 15:56
閱讀 1287·2019-08-30 15:55
閱讀 971·2019-08-30 13:19