如何致电承诺，然后在React JS中同步功能

Question

我正在与React JS（前端）和C＃（后端）合作。我正面临一个问题，即从React屏幕（TSX文件）调用客户端API调用。 此API调用正在返回承诺对象。但是问题在于我们正在使用的API调用中。然后函数以获取API调用的响应，并且此功能是异步工作的。它没有执行所有语句，然后立即返回到初始调用功能（.tsx文件）。

但是我想要一些我的API调用应该如何完全执行（然后在。下），然后它应该返回到调用功能。

请参阅下面的代码 -

    StudentDetails.tsx-
    ------------------
    StudentResults(id: number) {
        //api call
        this.StudentHandler.StudentDetail(id) //here id is the student id
        
        //other operations/statements (these statements should only be called after complete api execution)
        statement 1...
        statement 2...
        etc
    }

    StudentHandler.ts-
    ------------------

        StudentDetail(id: number){
         return  this.studentApi.getStudentDetail(id)
            .then(response => {
                
                statement 1... (this statement is calling after api execution)
                statement 2...  (and this statement is not calling after first statement. It's going to 'setStudentResults' function of tsx file and after executing                             remaining statemetns it's coming here again at 'statement 2')
            })
            .catch(error => {
                console.log(error)                  
            })
}

Answer 1

我将重写您的代码以阐明使用异步/等待的点：

async StudentResults(id: number) => {
        //api call
        // *************************
        // the await keyword pauses the execution of StudentResults till StudentDetail return something (successful or not)
        await this.StudentHandler.StudentDetail(id) //here id is the student id
        
        // ********************
        // this code is waiting for StudentDetail to complete
        //other operations/statements (these statements should only be called after complete api execution)
        statement 1...
        statement 2...
        etc
    }

    StudentHandler.ts-
    ------------------

        StudentDetail(id: number){
         return  this.studentApi.getStudentDetail(id)
            .then(response => {
                
                statement 1... (this statement is calling after api execution)
                statement 2...  (and this statement is not calling after first statement. It's going to 'setStudentResults' function of tsx file and after executing                             remaining statemetns it's coming here again at 'statement 2')
            })
            .catch(error => {
                console.log(error)                  
            })
}