react中的ajax封装实例详解
代码块
**opts: {'可选参数'}
**method: 请求方式:GET/POST,默认值:'GET';
**url: 发送请求的地址, 默认值: 当前页地址;
**data: string,json;
**async: 是否异步:true/false,默认值:true;
**cache: 是否缓存:true/false,默认值:true;
**contentType: HTTP头信息,默认值:'application/x-www-form-urlencoded';
**success: 请求成功后的回调函数;
**error: 请求失败后的回调函数;
*/
let configResText = function (responseText, resTextType){
return resTextType == 'html' ? responseText : JSON.parse(responseText);
};
let ajax = function (opts){
//一.设置默认参数
var defaults = {
method: 'GET',
url: '',
data: '',
async: true,
cache: false,
contentType: 'application/x-www-form-urlencoded',
resTextType: '',
success: function (){},
error: function (){}
};
//二.用户参数覆盖默认参数
for(var key in opts){
defaults[key] = opts[key];
}
//三.对数据进行处理
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.创建ajax对象
var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2.和服务器建立联系,告诉服务器你要取什么文件
oXhr.open(defaults.method, defaults.url, defaults.async);
//3.发送请求
if(defaults.method === 'GET')
oXhr.send(null);
else{
oXhr.setRequestHeader("Content-type", defaults.contentType);
oXhr.send(defaults.data);
}
//4.等待服务器回应
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;
调用方法
import ajax from '../../commonJS/ajax.js';
ajax({
url: '',
data: '',
success: function(t) {
if (t) {
let allpageNum = t.data;
$this.setState({
allPages:allpageNum
});
}
}
});
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。