ReactJS：如何确保服务器请求顺序执行避免未定义错误

这确实是React异步开发中很常见的坑——因为网络请求的响应顺序不固定，第二个请求很可能在第一个还没返回时就执行，导致courses未定义报错。下面给你两种在componentDidMount里就能实现的可靠方案：

方法一：使用Async/Await（推荐，代码可读性更高） #

React允许componentDidMount作为异步函数，我们可以用await关键字强制等待第一个请求完成后再执行后续逻辑：

async componentDidMount() {
  try {
    // 等待第一个接口返回并解析数据，确保courses有值
    const courseRes = await fetch('/getAllCoursesByMajor');
    const courses = await courseRes.json();
    
    // 建议把courses存到组件state中，方便后续组件使用
    this.setState({ courses });

    // 现在courses已定义，安全执行循环请求
    for (const course of courses) {
      const prevCourseRes = await fetch(`/getPreviousCourse?courseId=${course.id}`);
      const prevCourse = await prevCourseRes.json();
      
      // 这里处理单个前置课程的逻辑，比如更新state或做其他操作
      console.log(`课程${course.name}的前置课程:`, prevCourse);
    }
  } catch (err) {
    // 捕获请求过程中的任何错误，避免组件崩溃
    console.error('请求处理失败:', err);
    // 可以在这里给用户显示错误提示，比如弹出toast
  }
}

关键说明： #

• await会暂停代码执行，直到第一个请求的Promise状态变为resolved，确保courses拿到真实数据后再进入循环。
• 用try/catch包裹整个逻辑，能捕获网络错误、解析错误等各种异常情况。

方法二：使用Promise链式调用 #

如果你更习惯Promise的传统写法，可以用.then()把两个请求的逻辑串联起来：

componentDidMount() {
  fetch('/getAllCoursesByMajor')
    .then(res => res.json())
    .then(courses => {
      this.setState({ courses });
      
      // 如果多个getPreviousCourse请求不需要按顺序执行，用Promise.all并行请求更高效
      return Promise.all(
        courses.map(course => 
          fetch(`/getPreviousCourse?courseId=${course.id}`).then(res => res.json())
        )
      );
    })
    .then(allPrevCourses => {
      // 这里拿到所有前置课程的结果数组，可统一处理
      console.log('所有前置课程数据:', allPrevCourses);
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
}

关键说明： #

• 第一个.then()拿到courses后，才会执行后续的请求逻辑，从根本上避免了courses未定义的问题。
• Promise.all可以同时发起多个getPreviousCourse请求，比逐个循环await节省时间（如果你的业务场景允许并行请求的话）。

额外注意事项 #

• 尽量把courses存到组件的state中，而不是仅用局部变量——因为局部变量在组件重新渲染后会丢失，存到state里能保证数据的持久性和可访问性。
• 如果你的项目中使用了Axios等请求库，写法类似：把fetch换成axios.get，直接用await axios.get(url)就能拿到响应数据，不需要额外解析json。

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