如何使一個ASync函數等待，直到收集到所有信息？

Question

getGrades() { 
    let grades = {}; 
    this.state.courses.map((course) => { 
     this.state.studentDetails.map((student) => { 
      request.get(`http://localhost:8080/user/${student.id}/grades`).then((response) => { 
       if (response) { 
        response.body.map((grade) => { 
         grades[`${student.id}_${course.id}_${grade.gradeType}`] = grade.grade; 
        }); 
       } 
      }); 
     }); 
    }); 

    this.setState({grades: grades}); 
} 

我希望this.setState({grades: grades});只有在收集所有信息時才被調用。我怎樣才能做到這一點？

Answer 1

您需要按相反的順序進行操作。

1. 獲取數據
2. 設置狀態

-

getGrades() { 
    const onComplete = (response) => { 
     if (response) { 
      const grades = {}; 
      this.state.courses.map((course) => { 
       this.state.studentDetails.map((student) => { 
        response.body.map((grade) => { 
         // Not sure this will work after you receive multiple details. 
         // Probably it will require some changes 
         grades[`${student.id}_${course.id}_${grade.gradeType}`] = grade.grade; 
        }); 
       }); 
      }); 
      this.setState({grades: grades}); 
     } 
    } 

    // Get IDs of students you need to fetch detail for. 
    const studentIds = this.state.studentDetails.map(student => student.id); 

    // Fetch details for all students. 
    // You have to implement endoint that responds with multiple students details if requested. 
    // E.g: 
    // Single detail /users/1/grades 
    // Multiple details /users/1,2,3/grades 
    request.get(`http://localhost:8080/user/${studentIds.join(',')}/grades`).then(onComplete); 
} 

Answer 2

你可以使用異步瀑

寫兩個活性功能的一個給參數以外， 在你的情況下設置數組，如果有響應並將它傳遞給下一個函數離子在您設定的狀態

https://www.npmjs.com/package/async-waterfall