Ajax 的 GET 请求封装
function getPromise(param) {
return new Promise((resolve, reject) => {
// 0. 将参数转换成字符串格式:xxx?name=cez&age=18
var objStr = objToString(param.data);
// 1. 创建一个异步对象 xmlhttp;
var xmlhttp = new XMLHttpRequest();
// 2. 指定请求方法和URL
xmlhttp.open("GET", param.url + "?" + objStr);
// 3. 发送请求
xmlhttp.send();
// 4. 服务器响应处理
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status === 200) {
// 请求成功的回调
resolve(xmlhttp);
} else {
// 请求失败的回调
reject(xmlhttp);
}
}
};
});
}
function objToString(obj) {
var res = [];
for (var key in obj) {
res.push(key + "=" + obj[key]);
}
return res.join("&");
}
// get 请求
getPromise({
url: "/api/admin/GetAdminList",
data: data,
})
.then((res) => {
console.log("请求成功", res);
})
.catch((err) => {
console.log("请求失败", err);
});
🚀 优化:
在请求中设置超时功能,即告诉它我的请求会等待多长的时间,如果这么长的时间内都没有响应请求,那就自动终止这次请求;
function getPromise(param) {
return new Promise((resolve, reject) => {
var timer, objStr, xmlhttp;
// 0. 将参数转换成字符串格式:xxx?name=cez&age=18
objStr = objToString(param.data);
// 1. 创建一个异步对象 xmlhttp;
xmlhttp = new XMLHttpRequest();
// 1.1 启动计时器,在 timeout 毫秒后将中止请求
if (param.timeout) {
timer = setTimeout(function () {
xmlhttp.abort(); // 中止请求
}, param.timeout);
}
// 2. 指定请求方法和URL
xmlhttp.open("GET", param.url + "?" + objStr);
// 3. 发送请求
xmlhttp.send();
// 4. 服务器响应处理
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
// 此时请求已响应,取消中止请求操作
clearTimeout(timer);
if (ajax.status === 200) {
// 请求成功的回调
resolve(xmlhttp);
} else {
// 请求失败的回调
reject(xmlhttp);
}
}
};
});
}
//
function objToString(obj) {
var res = [];
for (var key in obj) {
res.push(key + "=" + obj[key]);
}
return res.join("&");
}
// get 请求
getPromise({
url: "/api/admin/GetAdminList",
data: data,
timeout: 2000,
})
.then((res) => {
console.log("请求成功", res);
})
.catch((err) => {
console.log("请求失败", err);
});
Ajax 的 POST 请求封装
POST 请求封装和 GET 请求类似,需要注意的一点是在发送 POST 请求前要设置请求头。
function postPromise(param) {
return new Promise((resolve, reject) => {
var timer, objStr, xmlhttp;
// 0. 将参数转换成字符串格式:name=cez&age=18
objStr = objToString(param.data);
// 1. 创建一个异步对象 xmlhttp;
xmlhttp = new XMLHttpRequest();
// 1.1 启动计时器,在 timeout 毫秒后将中止请求
if (param.timeout) {
timer = setTimeout(function () {
xmlhttp.abort(); // 中止请求
}, param.timeout);
}
// 2. 指定请求方法和URL
xmlhttp.open("POST", param.url);
// 2.1 添加请求头
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 3. 发送请求
xmlhttp.send(objStr);
// 4. 服务器响应处理
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
// 此时请求已响应,取消中止请求操作
clearTimeout(timer);
if (ajax.status === 200) {
// 请求成功的回调
resolve(xmlhttp);
} else {
// 请求失败的回调
reject(xmlhttp);
}
}
};
});
}
//
function objToString(obj) {
var res = [];
for (var key in obj) {
res.push(key + "=" + obj[key]);
}
return res.join("&");
}
// post 请求
postPromise({
url: "/api/admin/GetAdminList",
data: data,
timeout: 2000,
})
.then((res) => {
console.log("请求成功", res);
})
.catch((err) => {
console.log("请求失败", err);
});
Ajax 的完整封装
在判断是何种请求时,使用了 toLowerCase()
方法将字符串转成小写再对比,这样就可以在传实参时不考虑大小写问题。
function ajaxPromise(param) {
return new Promise((resolve, reject) => {
var timer, objStr, xmlhttp;
// 0. 将参数转换成字符串格式:name=cez&age=18
objStr = objToString(param.data);
// 1. 创建一个异步对象 xmlhttp;
xmlhttp = new XMLHttpRequest();
// 1.1 启动计时器,在 timeout 毫秒后将中止请求
if (param.timeout) {
timer = setTimeout(function () {
xmlhttp.abort(); // 中止请求
}, param.timeout);
}
// 2. 指定请求方法和URL
if (param.type.toLowerCase() === "get") {
xmlhttp.open(param.type, param.url + "?" + objStr);
// 3. 发送请求
xmlhttp.send();
} else {
xmlhttp.open(param.type, param.url);
// 2.1 添加请求头
xmlhttp.setRequestHeader(
"Content-type",
"application/x-www-form-urlencoded"
);
// 3. 发送请求
xmlhttp.send(objStr);
}
// 4. 服务器响应处理
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
// 此时请求已响应,取消中止请求操作
clearTimeout(timer);
if (ajax.status === 200) {
// 请求成功的回调
resolve(xmlhttp);
} else {
// 请求失败的回调
reject(xmlhttp);
}
}
};
});
}
function objToString(obj) {
var res = [];
for (var key in obj) {
res.push(key + "=" + obj[key]);
}
return res.join("&");
}
ajaxPromise({
url: "/api/admin/GetAdminList",
type: "get",
data: data,
timeout: 2000,
})
.then((res) => {
console.log("请求成功", res);
})
.catch((err) => {
console.log("请求失败", err);
});