您好,登錄后才能下訂單哦!
react中的ajax封裝實例詳解
代碼塊
**opts: {'可選參數(shù)'} **method: 請求方式:GET/POST,默認值:'GET'; **url: 發(fā)送請求的地址, 默認值: 當(dāng)前頁地址; **data: string,json; **async: 是否異步:true/false,默認值:true; **cache: 是否緩存:true/false,默認值:true; **contentType: HTTP頭信息,默認值:'application/x-www-form-urlencoded'; **success: 請求成功后的回調(diào)函數(shù); **error: 請求失敗后的回調(diào)函數(shù); */ let configResText = function (responseText, resTextType){ return resTextType == 'html' ? responseText : JSON.parse(responseText); }; let ajax = function (opts){ //一.設(shè)置默認參數(shù) var defaults = { method: 'GET', url: '', data: '', async: true, cache: false, contentType: 'application/x-www-form-urlencoded', resTextType: '', success: function (){}, error: function (){} }; //二.用戶參數(shù)覆蓋默認參數(shù) for(var key in opts){ defaults[key] = opts[key]; } //三.對數(shù)據(jù)進行處理 if(typeof defaults.data === 'object'){ //處理 data var str = ''; for(var key in defaults.data){ var curDataStr = JSON.stringify(defaults.data[key]); if (curDataStr.charAt(0) == '[' && curDataStr.charAt(curDataStr.length-1) == ']') { var arrQuery = JSON.parse(curDataStr).map(function (item){ return key + '[]=' + item }).join('&'); str += key + '=' + arrQuery + '&'; } else { str += key + '=' + defaults.data[key] + '&'; } } defaults.data = str.substring(0, str.length - 1); } defaults.method = defaults.method.toUpperCase(); //處理 method defaults.cache = defaults.cache ? '' : '&' + new Date().getTime() ;//處理 cache if( defaults.method === 'GET' && (defaults.data || defaults.cache) ) { defaults.url += String('?' + defaults.data + defaults.cache); //處理 url if(defaults.cache){ defaults.url = defaults.url.replace(/(\?[^\?]+)\?/gi, '$1'); } } //四.開始編寫ajax //1.創(chuàng)建ajax對象 var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //2.和服務(wù)器建立聯(lián)系,告訴服務(wù)器你要取什么文件 oXhr.open(defaults.method, defaults.url, defaults.async); //3.發(fā)送請求 if(defaults.method === 'GET') oXhr.send(null); else{ oXhr.setRequestHeader("Content-type", defaults.contentType); oXhr.send(defaults.data); } //4.等待服務(wù)器回應(yīng) oXhr.onreadystatechange = function (){ if(oXhr.readyState === 4){ if(oXhr.status === 200) defaults.success.call(oXhr, configResText(oXhr.responseText, defaults.resTextType)); else{ defaults.error(); } } }; }; export default ajax;
調(diào)用方法
import ajax from '../../commonJS/ajax.js'; ajax({ url: '', data: '', success: function(t) { if (t) { let allpageNum = t.data; $this.setState({ allPages:allpageNum }); } } });
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。