ajxa 使用起来不如 axios 方便配置和抽离,反复配置很难受,模仿着经常 封装 axios 的样子,封装个 ajax 配置,封装文件分为:
1. ajax 抽离文件
request.js
ajxa配置文件api.js
多接口的封装文件
/* 1. 创建个 ajax promise 对象 */
const ajax = (option) => {
return new Promise((reslove, rejetc) => {
// 1. 格式化数据
let param = formParam(option.data);
// 2. 创建对象
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 3. 配置
/* 设置公共请求头携带参数 */
// 6. 格式化数据方法
function formParam(data) {
let arr = [];
for (let prop in arr) {
/* GET 方法,讲参数按照 格式序列化,加入到数组 */
arr.push(`${prop}=${data[prop]}`);
}
/* 转为 字符串 & 隔开 */
return arr.join("&");
}
/* 设置请求时长 */
xhr.timeout = 500;
/* 发起请求 */
if (option.type == "get") {
/* GTE 方法拼接链接,send 参数 null */
xhr.open(option.type, option.url + "?" + param, true);
xhr.setRequestHeader("token", option.token);
xhr.setRequestHeader("aid", option.aid);
xhr.send(null);
} else if (option.type == "post") {
/* POST 方法 ,参数放在 send 内 , 切设置请求头 */
xhr.open(option.type, option.url, true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.setRequestHeader("token", option.token);
xhr.setRequestHeader("aid", option.aid);
xhr.send(option.data);
}
// 5. 接收返回参数
xhr.onreadystatechange = () => {
// readyState=4 代表已发送请求
if (xhr.readyState == 4) {
if (xhr.status == 200) {
reslove(JSON.parse(xhr.responseText));
} else {
rejetc(JSON.parse(xhr.responseText));
}
}
};
});
};
2. api.js 按需使用接口
单独抽离管理的 接口请求,使用时,传入 option 配置即可
let textDOM = document.querySelector("#text");
let btn = document.querySelector("#btn");
let textBox = document.querySelector(".textBox");
let table_list = document.querySelector("#table_list");
let msg = null;
function requsetMSG() {
/* 请求接口 */
let option = {
type: "post",
url: "http://okkk.221320.bcc/admin.php?c=index&a=asdsa",
data: {
pageIndex: "2",
pageSize: "20",
},
token: "2030632asdsaded939",
aid: "+mnasdasSKmyL5L+iasdasMstkz",
};
ajax(option)
.then((res) => {
console.log("---------响应成功------------");
msg = res.data.list;
// console.log(msg);
createEle();
})
.catch((err) => {
console.log("---------响应失败------------");
console.log(err);
});
}
btn.addEventListener("click", function () {
requsetMSG();
console.log("ok");
});
/* 循环渲染标签 */
function createEle() {
console.log(msg);
/* 渲染追加行html */
msg.forEach((item) => {
let tr_tag = document.createElement("tr");
let inHTML = `
<td> ${item.year}-${item.month} </td>
<td> ${item.added_money}</td>
<td> ${item.arrival_money}</td>
<td> ${item.arrival_money_percent.percent}</td>
`;
tr_tag.innerHTML = inHTML;
table_list.appendChild(tr_tag);
});
}