基于测验名称的多API成绩关联获取与表格渲染逻辑优化咨询

你的核心问题在于AJAX请求的异步特性：循环中发起的成绩请求完成顺序是不确定的，可能在处理"Pre Test"的回调时，"Post Test"的成绩还没获取到，导致posttest为空，无法正确关联数据。我们可以通过先收集所有需要的测验成绩，再统一渲染的方式来解决这个问题，同时让逻辑更清晰健壮。

方案1：使用Promise统一处理异步请求，先收集所有成绩再渲染 #

这种方式会先获取所有测验的成绩并存储在一个映射对象中（键为测验名称，值为成绩），等所有请求完成后，再根据用户信息渲染包含Pre/Post Test成绩的表格行。

// 封装AJAX请求为Promise，方便异步处理
function fetchQuizData(url) {
  return new Promise((resolve, reject) => {
    $.ajax({ url })
      .done(resolve)
      .fail(reject);
  });
}

async function loadQuizGrades() {
  try {
    // 第一步：获取测验列表数据
    const get_quiz_res = await fetchQuizData("MyURL");
    const quizzes = get_quiz_res.quizzes;

    // 第二步：收集需要的测验（Pre/Post Test）的成绩请求
    const gradePromises = quizzes.map(quiz => {
      return fetchQuizData(`*******&quizid=${quiz.id}`)
        .then(gradeRes => ({
          name: quiz.name,
          grade: gradeRes.grade
        }));
    });

    // 等待所有成绩请求完成，得到[{name: "Pre Test", grade: xxx}, ...]
    const allGrades = await Promise.all(gradePromises);

    // 把成绩转换为名称-成绩的映射，方便快速查找
    const gradeMap = allGrades.reduce((map, item) => {
      map[item.name] = item.grade;
      return map;
    }, {});

    // 第三步：渲染表格行（假设userincourseres是已有的用户数据数组）
    userincourseres.forEach(user => {
      const row = $(`
        <tr>
          <td>${user.fullname}</td>
          <td>${gradeMap["Pre Test"] || "N/A"}</td>
          <td>${gradeMap["Post Test"] || "N/A"}</td>
        </tr>
      `);
      $('#myTable').append(row);
    });
  } catch (error) {
    console.error("加载测验数据失败:", error);
  }
}

// 调用执行
loadQuizGrades();

方案2：针对Pre/Post Test单独配对处理 #

如果你的业务中只需要处理这两个测验，也可以直接筛选出这两个测验的ID，分别获取成绩后再渲染：

async function loadSpecificQuizGrades() {
  try {
    const get_quiz_res = await fetchQuizData("MyURL");
    const preTestQuiz = get_quiz_res.quizzes.find(q => q.name === "Pre Test");
    const postTestQuiz = get_quiz_res.quizzes.find(q => q.name === "Post Test");

    if (!preTestQuiz || !postTestQuiz) {
      console.warn("未找到Pre Test或Post Test测验");
      return;
    }

    // 同时获取两个测验的成绩
    const [preGradeRes, postGradeRes] = await Promise.all([
      fetchQuizData(`*******&quizid=${preTestQuiz.id}`),
      fetchQuizData(`*******&quizid=${postTestQuiz.id}`)
    ]);

    // 渲染所有用户的行
    userincourseres.forEach(user => {
      const row = $(`
        <tr>
          <td>${user.fullname}</td>
          <td>${preGradeRes.grade}</td>
          <td>${postGradeRes.grade}</td>
        </tr>
      `);
      $('#myTable').append(row);
    });
  } catch (error) {
    console.error("加载成绩失败:", error);
  }
}

loadSpecificQuizGrades();

关键优化点说明 #

• 异步控制：用Promise.all和async/await替代嵌套回调，避免回调地狱，同时确保所有需要的数据都获取完成后再渲染。
• 数据映射：将测验名称和成绩关联成映射对象，方便快速查找对应成绩，逻辑更清晰。
• 容错处理：添加了异常捕获和测验不存在的判断，避免因接口出错或数据缺失导致页面崩溃。

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