使用async/await读取GitHub文本学生数据并解析为对象数组渲染到页面

你原有代码的核心问题是文本拆分和分组解析逻辑错误，且存在大量无效的Student实例化代码，以下是修正后的完整可运行代码：

const button = document.getElementById("btn");
const loader = document.getElementById("loading");
const displayArea = document.getElementById("data");

button.addEventListener("click", function () {
  getData();
})

class Student {
  constructor(fullName, address, phone, course) {
    this.fullName = fullName;
    this.address = address;
    this.phone = phone;
    this.course = course;
  }

  // 调整为返回HTML格式的信息，方便页面渲染
  getInfoHtml() {
    return `
      <div style="margin: 15px 0; padding-bottom: 10px; border-bottom: 1px solid #eee;">
        <p>姓名：${this.fullName}</p>
        <p>地址：${this.address}</p>
        <p>电话：${this.phone}</p>
        <p>课程：${this.course}</p>
      </div>
    `
  }
}

async function getData() {
  loader.style.display = "inline-block";
  try {
    const response = await fetch(`https://v-dresevic.github.io/Advanced-JavaScript-Programming/data/students.txt`);
    if (response.status !== 200) {
      throw new Error("文件读取出错");
    }
    const text = await response.text();
    // 按换行拆分所有行，过滤空行避免文件末尾空行干扰解析
    const lineArr = text.split('\n').filter(line => line.trim() !== '');
    const students = [];
    // 每4行对应1个学生的信息，分组实例化Student对象
    for(let i = 0; i < lineArr.length; i += 4) {
      const student = new Student(
        lineArr[i],
        lineArr[i+1],
        lineArr[i+2],
        lineArr[i+3]
      );
      students.push(student);
    }
    // 拼接所有学生信息渲染到页面
    displayArea.innerHTML = students.map(s => s.getInfoHtml()).join('');
  } catch (err) {
    displayArea.innerHTML = "未知错误：" + err;
  } finally {
    loader.style.display = "none";
  }
}

核心修改说明 #

• 删除了原有代码中无效的空Student实例化代码，无参数的空实例不会存储任何有效学生数据
• 修正文本拆分逻辑：先按换行符切割所有内容行，过滤空行后每4行一组生成Student实例，完全匹配数据格式要求
• 调整了Student类的输出方法返回HTML结构，适配网页渲染场景，也可根据需求保留纯文本输出，渲染时将换行符替换为<br>即可
• 完全保留了要求的async/await异步逻辑实现，符合作业规范

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