ajax网络请求的封装分为两个版本,第一个是基础版本,第二个是加了promise之后的封装
1.基础封装
ajax的封装
function ajax(ops){
// 先处理默认属性
ops.type = ops.type || "get";
ops.data = ops.data || "";
// 根据当前的请求方式,决定是否需要拼接数据,处理url
ops.url = ops.type=="get" ? ops.url + "?" + ops.data : ops.url;
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);
}
// 开启监听
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
// 执行回调函数,取出数据
ops.success(xhr.responseText);
}
}
}
//调用代码
document.onclick = function(){
//url根据具体地址修改
var url = "http://localhost/ajax/data/get-post.php";
ajax({
//成功后执行
success:function(res){
console.log(res);
},
url:url,
type:"get",
data:"user=admin&pass=123"
});
}
2.加了promise之后的封装
//ajax的封装
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"){
let t = new Date().getTime();
ops.url = ops.url + "?" + str + "__qft="+ t;
}
var xhr = new XMLHttpRequest();
xhr.open(ops.type, ops.url);
if(ops.type == "get"){
xhr.send();
}else{
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(ops.data);
}
//Promise的运用
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);
}
}
})
}
//方法一 直接调用
var p1 = ajax({
type:"get",
url:"xxx",
data:{
user:"admin",
pass:123
}
})
p1.then(function(res){
console.log(res)
})
p1.catch(function(res){
console.log(res)
})
//方法二 利用ES7 async-await调用
async function fn(abc){
var p1 = await ajax({
url:"http://localhost/async-await/data/d1.php"
});
var p2 = await ajax({
url:"http://localhost/async-await/data/d12312.php"
});
var p3 = await ajax({
url:"http://localhost/async-await/data/d3.php"
});
var p3 = await ajax({
url:"http://localhost/async-await/data/d3.php"
});
var p3 = await ajax({
url:"http://localhost/async-await/data/d3.php"
});
console.log(p1, p2, p3);
console.log(abc);
}
document.onclick = function(){
fn("hello world");
}