function ajax(ops){
// 先处理默认属性
ops.type = ops.type || "get";
ops.data = ops.data || "";
var str = "";
for(var key in ops.data){
str += `${key}=${ops.data[key]}$`
}
if(ops.type == "get"){
// 在get请求时,使用时间戳避免,缓存问题
let t = new Date().getTime();
ops.url = ops.url + "?"+ str + "?__nowt="+ t ;
}
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 开启请求
xhr.open(ops.type, ops.url);
// 根据类型决定send的内容及内容数据格式
if(ops.type == "get"){
xhr.send();
}else{
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(ops.data);
}
// 开启监听
return new Promise(function(resolve,reject){
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
// 执行回调函数,取出数据
resolve(xhr.responseText);
}else if(xhr.readyState === 4 && xhr.status !== 200){
reject("当前请求失败了,失败的原因是:" + xhr.status);
}
}
})
}
这样封装可以很容易的接收到成功或者失败后返回的数据
当前ajax封装完成之后的调用方式如下例:
var p1 = ajax({
type:"get",
url:"",
data:{
user:"admin",
pass:123
}
})
p1.then(function(res){
console.log(res);
})
p1.catch(function(res){
console.log(res);
})