JavaScript：从远程文本获取转对象时遇text未定义错误

你遇到的错误核心原因有两个：

1. fetch是异步操作：浏览器会优先执行var student1 = new Studenti(...)这行代码，此时fetch请求还未完成，根本没有获取到text数据。
2. 变量作用域限制：text变量仅在fetch的第二个then回调函数内部有定义，外部代码无法访问到它。

下面是两种可行的修复方案：

方案一：在Promise链内处理数据 #

把创建实例和打印的逻辑放到then回调里，确保在获取到数据后再执行：

class Studenti {
  constructor(name, address, phone, course) {
    this.name = name;
    this.address = address;
    this.phone = phone;
    this.course = course;
  }

  getInfo() {
    return `Name: ${this.name}\nAddress: ${this.address}\nPhone: ${this.phone}\nCourse: ${this.course}`;
  }
}

fetch("https://v-dresevic.github.io/Advanced-JavaScript-Programming/data/students.txt")
  .then(res => {
    // 检查请求是否成功
    if (!res.ok) throw new Error('请求失败');
    return res.text();
  })
  .then(text => {
    // 分割文本并过滤空行，避免末尾空元素影响
    const data = text.split("\n").filter(line => line.trim() !== '');
    const student1 = new Studenti(data[0], data[1], data[2], data[3]);
    console.log(student1);
    // 调用getInfo查看格式化信息
    console.log(student1.getInfo());
  })
  .catch(err => {
    // 捕获网络或数据处理错误
    console.error('出错了:', err);
  });

方案二：使用async/await语法（更易读） #

用async函数包裹逻辑，让异步代码看起来像同步代码：

class Studenti {
  constructor(name, address, phone, course) {
    this.name = name;
    this.address = address;
    this.phone = phone;
    this.course = course;
  }

  getInfo() {
    return `Name: ${this.name}\nAddress: ${this.address}\nPhone: ${this.phone}\nCourse: ${this.course}`;
  }
}

// 定义async函数
async function loadStudent() {
  try {
    const res = await fetch("https://v-dresevic.github.io/Advanced-JavaScript-Programming/data/students.txt");
    if (!res.ok) throw new Error('请求失败');
    const text = await res.text();
    const data = text.split("\n").filter(line => line.trim() !== '');
    const student1 = new Studenti(data[0], data[1], data[2], data[3]);
    console.log(student1);
    console.log(student1.getInfo());
  } catch (err) {
    console.error('出错了:', err);
  }
}

// 调用函数
loadStudent();

额外优化说明 #

• 增加res.ok检查：确保请求返回成功状态码（200-299），避免处理错误响应。
• 过滤空行：用filter去掉分割后可能存在的空字符串，防止数组索引越界。
• 模板字符串替换拼接：把+拼接改成模板字符串，代码更简洁易维护。

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