异步案例：找到韩梅梅的班主任_ajax异步找班主任-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49596018/article/details/111245609

本文介绍了如何使用async/await和Promise实现异步编程，通过示例展示了如何通过AJAX分别从stu.json、classse.json和teacher.json中获取韩梅梅对应的班级和班主任信息的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过异步async|await 发送ajax请求，获取到韩梅梅对应的班级再对应的班主任
1、stu.json文件

{
    "student": [
        {
            "id": 1,
            "name": "张三",
            "age": 20,
            "gender": "男",
            "classId": 1
        },
        {
            "id": 2,
            "name": "李四",
            "age": 18,
            "gender": "男",
            "classId": 1
        },
        {
            "id": 3,
            "name": "王五",
            "age": 19,
            "gender": "男",
            "classId": 2
        },
        {
            "id": 4,
            "name": "李华",
            "age": 21,
            "gender": "女",
            "classId": 2
        },
        {
            "id": 5,
            "name": "韩梅梅",
            "age": 20,
            "gender": "女",
            "classId": 3
        },
        {
            "id": 6,
            "name": "马冬梅",
            "age": 23,
            "gender": "女",
            "classId": 3
        }
    ]
}

2、classse.json文件

{
    "classes": [
        {
            "id": 1,
            "name": "50班",
            "teacherId": 1
        },
        {
            "id": 2,
            "name": "51班",
            "teacherId": 2
        },
        {
            "id": 3,
            "name": "53班",
            "teacherId": 3
        }
    ]
}

3、teacher.json文件

{
    "teachers": [
        {
            "id": 1,
            "name": "江老师",
            "gender": "女"
        },
        {
            "id": 2,
            "name": "白老师",
            "gender": "男"
        },
        {
            "id": 3,
            "name": "谢老师",
            "gender": "男"
        }
    ]
}

4、find.html文件

<body>
    <button id="btn">打印韩梅梅的班主任</button>
    <script>
        btn.onclick = function () {
            let classID;
            let teacherID;
            let teacherName;

            // 1. 创建 XMLHttpRequest 对象（创建一个跑腿的人）
            let xhr = null;
            // 解决兼容性问题
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            function a() {
                return new Promise(resolve => {
                    xhr.open('GET', './stu.json', true);
                    xhr.send(null);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            // JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
                            let arr = JSON.parse(xhr.responseText).student;
                            console.log("in1", arr);
                            let classID = null;
                            for (let i of arr) {
                                if (i.name === '韩梅梅') {
                                    classID = i.classId;

                                }

                            }
                            resolve(classID);
                        }
                    }
                })
            };
            function b(temp) {
                return new Promise(resolve => {
                    xhr.open('GET', './classes.json', true);
                    xhr.send(null);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            let arr = JSON.parse(xhr.responseText).classes;
                            console.log("in2", arr);
                            let teacherID = null;
                            for (let i of arr) {
                                if (i.id === temp) {
                                    teacherID = i.teacherId;
                                }
                            }
                            resolve(teacherID)
                        }
                    }
                })
            };
            function c(temp) {
                return new Promise(resolve => {
                    xhr.open('GET', './teacher.json', true);
                    xhr.send(null);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            let arr = JSON.parse(xhr.responseText).teachers;
                            let teacherID = null;
                            for (let i of arr) {
                                if (i.id === temp) {
                                    teacherName = i.name;
                                }
                            }
                            resolve(teacherName)
                        }
                    }
                })
            };
            async function getInfo() {
                let x = await a();   //await会接受resolve抛出来的值
                let y = await b(x);
                console.log(await c(y));

            }
            getInfo();
        }
    </script>
</body>