异步实现找下标

//获取显示classID,teacherID,teacherName的DOM节点
let pEles = document.getElementsByTagName(“p”);
// let spanEles=document.getElementsByTagName(“spanEles”)
// let divEle=document.getElementsByTagName(“div”)
//随机老师数据
let teaArrs = Mock.mock({
“teachers|4”: [{
“teaID|+1”: 1,
“name|+1”: [“杨老师”, “汤老师”, “闵老师”,“曾老师”],
}]
});
//随机班级数据
let clsArrs = Mock.mock({
“classes|10”: [{
“clsID|+1”: [“F76”, “F77”, “F78”,“F79”],
“teacherID|+1”: [1, 2, 3,4]
}]
});
//随机学生数据
let stuArrs = Mock.mock({
“stu|10”: [{
“stuID|+1”: 1,
“stuName”: “@cname”,
“clsID|1”: [“F76”, “F77”, “F78”,“F79”],
}]
});
console.log(teaArrs,clsArrs,stuArrs);
//获取渲染学生数据区域
function renderStu() {
let str = “”;
stuArrs.stu.forEach(item => {
str += <option value="${item.stuID}">${item.stuName}</option>;
});
stu.innerHTML = str;
}
renderStu();
//封装AJAX
function ajax({ type = “get”, url, data = “”, success }) {
//1、获取核心对象
let xhr = window.XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject(“Microsoft.XMLHTTP”);
//判断data是否为对象，如果是对象转换成键值对字符串的提交数据
data = data instanceof Object ?
objToFrom(data) : data;
//判断请求方式，从而决定发送请求是否传参
if (type === “post”) {
xhr.open(type, url, true);
xhr.send(data);
} else {
xhr.open(type, url + “?” + data, true);
xhr.send();
}
//4、解析服务器返回的数据 request请求 response响应
xhr.addEventListener(“readystatechange”, function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let temp = JSON.parse(xhr.responseText);
//把数据传给请求的处理函数
success(temp);
}
});
}
//对象转提交数据字符串
function objToFrom(obj) {
let str = “”;
for (let key in obj) {
str += &${key}=${obj[key]}
}
return str.substr(1);
}
//serach数据转对象
function formToObj(str) {
let obj = {}
str.split("&").map(item => {
let temp = item.split("=");
obj[temp[0]] = temp[1];
});
return obj;
}
//通过学生ID查找班级ID
Mock.mock(//getStu/, “get”, function ({ url }) {
let obj = formToObj(url.split("?")[1]);
//获取学生的数据
let stuArr = stuArrs.stu;
for (let index in stuArr) {
if (obj.stuID == stuArr[index].stuID) {
return stuArr[index].clsID;
}
}
});
//通过班级ID查找老师ID
Mock.mock(//getclass/, “get”, function ({ url }) {
let obj = formToObj(url.split("?")[1]);
//获取班级的数据
let cls = clsArrs.classes;
for (let index in cls) {
if (obj.clsID == cls[index].clsID) {
return cls[index].teacherID;
}
}
});
//通过老师ID查找老师姓名
Mock.mock(//getteacher/, “get”, function ({ url }) {
let obj = formToObj(url.split("?")[1]);
//获取老师数据
let tea = teaArrs.teachers;
for (let index in tea) {
if (obj.teaID == tea[index].teaID) {
return tea[index].name;
}
}
});
//主程序
stu.addEventListener(“change”, function () {
let obj = { stuID: stu.value };
[…pEles].map(item => item.innerText = “”);
gen(obj)
})

async function gen(obj) {
let temp = await new Promise((resolve, reject) => {
ajax({
type: “get”,
url: “/getStu”,
data: obj,
success: resolve
});
}); temp = await new Promise((resolve, reject) => {
obj = { clsID: temp }
ajax({
type: “get”,
url: “/getclass”,
data: obj,
success: resolve
});
});temp = await new Promise((resolve, reject) => {
obj = { teaID: temp }
ajax({ //通过老师ID查找老师姓名
type: “get”,
url: “/getteacher”,
data: obj,
success: function (teacherName) {
pEles[2].innerText = 老师的名字是:${teacherName};
},
});
});
}