Question

我在接收服务器响应时遇到问题。首先GET /getAllCoursesByMajor收到回复并将值设置为courses。但有时代码在GET getPreviousCourse中的for循环中断，因为它表示courses未定义。我知道react是异步的，所以它不能保证收到服务器响应。如何确保courses加载来自getAllCoursesByMajor的服务器响应，然后移至getPreviousCourse？

  componentDidMount() {
        let courses;
        axios.get('/getAllCoursesByMajor',{
                  params:{
                    major : major
                  }
              }).then(function(response) {
                courses = response.data;
            });

        axios.get('/getPreviousCourse', {
              params: {
                major: major,
                name : name
              }
            }).then(function(response) {

                for(var i = 0; i < noDuplicate.length; i++){
                  for(var j = 0; j < courses.length; j++){
                    if(noDuplicate[i].courseCode === courses[j].courseCode){
                      var course = {
                        courseCode : noDuplicate[i].courseCode,
                        overview : courses[j].overview
                      }
                      self.setState({ previousCourse: self.state.previousCourse.concat([course])});
                    }
                  }

     }

Answer 1

当第二个请求的响应速度快于第一个请求时，会发生这种情况。axios.get()是异步的。它不会阻止代码执行。您的第二个请求将在第一个请求之后立即开始，甚至可能比它完成得更快。当发生这种情况时，您的变量courses仍然是undefined，因为您的第一个请求的响应处理程序尚未被调用以为其分配值。

如果您的第二个请求取决于第一个请求的结果，您需要将其放在第一个请求的响应处理程序中：

axios.get('/getAllCoursesByMajor',{
    params: {
        major: major,
    }}).then(function(response) {
        const courses = response.data;

        axios.get('/getPreviousCourse', {
          params: {
            major: major,
            name : name
          }
        }).then(/* ... */);
    });

我理解反应是异步的，因此无法保证收到服务器响应。

与异步做某些事情没有任何关系。 React不知道任何服务器请求或您使用哪个库来创建它们。这里的问题是axios。

如果您的后端api在第一次请求中已经提供了之前的课程，那将会更好，因为您可以浪费大量时间与服务器进行多次往返，因为它可以在单个请求中提供您所需的信息。

ReactJs：如何正确接收服务器请求

1 个答案: