JavaScript中如何将getDetails的student_class_id传入getClass获取班级名

核心逻辑调整 #

你需要修改getClass函数支持接收班级ID参数、返回对应班级名称，再在getDetails的请求回调中调用getClass传入学生所属班级ID，拿到班级名后完成页面渲染。

具体修改代码（async/await 版本，可读性更高） #

// 1. 调整getDetails函数，拿到班级ID后调用getClass，获取结果后再渲染页面
const getDetails = async (infoID) => {
    try {
        const response = await axios.get(`${apiInfo}student/getDetails?student_id=${infoID}`);
        if (response.data.status == 'success') {
            // 注意不要用未声明的变量，加const避免全局变量污染
            const studentInfo = response.data.result;
            const classId = studentInfo.student_class_id;
            // 传入班级ID调用接口获取班级名称
            const className = await getClass(classId);
            
            // 拿到班级名后完成页面渲染
            $('#tabClassName').html(`<div class="col-xl-12 row">
                                        <div class="col-xl-6">
                                            <h6>Class details</h6>
                                            <p>Class :<span class="item">${className}</span></p>
                                        </div>
                                    </div>`);
        }
    } catch (err) {
        console.error('获取学生详情失败', err);
    }
}

// 2. 调整getClass函数，接收班级ID参数，返回匹配的班级名称
const getClass = async (studentClassId) => {
    try {
        const res = await axios.get(`${apiInfo}getClass`);
        if (res.data.status == 'success') {
            // 用find代替map更高效，找到匹配ID的班级项后直接返回
            const targetClass = res.data.result.find(item => item.id == studentClassId);
            return targetClass ? targetClass.class_name : '未知班级';
        }
        return '未知班级';
    } catch (err) {
        console.error('获取班级列表失败', err);
        return '未知班级';
    }
}

备选回调写法（兼容旧代码Promise.then风格） #

如果你不想用async/await语法，可以参考原始回调的写法：

const getDetails = (infoID) => {
    axios.get(`${apiInfo}student/getDetails?student_id=${infoID}`)
    .then(function (response) { 
        if(response.data.status == 'success') {
            const studentInfo = response.data.result;
            const classId = studentInfo.student_class_id;
            // 调用getClass传入ID，在回调函数中处理渲染逻辑
            getClass(classId, function(className) {
                $('#tabClassName').html(`<div class="col-xl-12 row">
                                            <div class="col-xl-6">
                                                <h6>Class details</h6>
                                                <p>Class :<span class="item">${className}</span></p>
                                            </div>
                                        </div>`);
            });
        }
    })
    .catch(err => console.error('获取学生详情失败', err));
}

const getClass = (studentClassId, callback) => {
    axios.get(`${apiInfo}getClass`)
    .then(function (res) { 
        if(res.data.status == 'success') {
            const targetClass = res.data.result.find(item => item.id == studentClassId);
            const className = targetClass ? targetClass.class_name : '未知班级';
            callback(className);
        } else {
            callback('未知班级');
        }
    })
    .catch(err => {
        console.error('获取班级列表失败', err);
        callback('未知班级');
    });
}

注意点 #

• 不要使用未声明的变量，原代码中的e = response.data.result会把e挂载到全局作用域，容易引发变量冲突问题
• 接口请求要加异常捕获，避免某个接口请求失败导致整个逻辑中断
• 查找匹配班级用Array.find比Array.map更高效，不需要遍历全量数组做无用操作

内容的提问来源于stack exchange，提问作者nonutt