Get方法封装
1.普通封装
function ajaxGet(url,callback){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.send(null);
xhr.onload = function(){
if(xhr.status==200){
callback(xhr.response);
}
}
}
调用:
ajaxGet('请求路径',function(res){
console.log(res);
})
2.结合promise封装
function ajaxGet(url){
return new Promise(function(success,failed){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.send(null);
xhr.onload = function(){
if(xhr.status == 200){
success(xhr.response);
}
}
})
}
调用:
ajaxGet("请求路径")
.then(function(res){
console.log(res);
console.log(JSON.parse(res));
return ajaxGet("请求路径");
})
.then(function(res){
console.log(res);
})
Post方法封装
1.普通方法封装
function ajaxPost(url,data,callback){
var xhr = new XMLHttpRequest();
xhr.open('POST',url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
xhr.send(data);
xhr.onload = function(){
if(xhr.status==200){
callback(xhr.response);
}
}
}
调用:
ajaxPost('请求路径',data,function(res){
console.log(res);
})
2.结合promise封装
function ajaxPost(url,data){
return new Promise(function(success){
var xhr = new XMLHttpRequest();
xhr.open('POST',url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
xhr.send(data);
xhr.onload = function(){
if(xhr.status == 200){
success(xhr.response);
}
}
})
}
调用:
ajaxPost("请求路径",data)
.then(function(res){
console.log(res);
console.log(JSON.parse(res));
return ajaxPost("请求路径",data);
})
.then(function(res){
console.log(res);
})