javascript - 如何让 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);
}