如何等到我从 angular 7 的后端 spring boot api 得到响应

问题描述

我想使用 http post 方法的结果从一条路线导航到另一条路线.但是导航是在没有 http post 响应的情况下发生的.当我调试代码时，响应越来越晚

I wanted to navigate from one route to another route with the result of http post method. But the navigation is happening without the response from http post. The response is getting later when i debugged the code

我该如何解决这个问题?有什么办法可以等待执行直到响应来自后端?

How can i fix this ? is there any way to wait the execution till the response comes from backend ?

当我点击一个按钮时，一个函数将执行，一个 http post 调用将发生，然后我需要将 post 请求的响应传递到一个新的路由

when i click on a button, a function will execute and a http post call will happen then i need to pass the response from the post request to a new route

测验.service.ts

Quiz.service.ts

getResult(answers: QuestionAnswer): Observable<number> {
  return this.http.post<number>(`${this.API_URL}result`, answers);
}

exam.component.ts

exam.component.ts

submitQuiz() {
    this.isSubmitted = true;
    const answers: QuestionAnswer = new QuestionAnswer(Array.from(this.selectedAnswers.keys()), Array.from(this.selectedAnswers.values()));
    let result: number;
    this.quizService.getResult(answers).subscribe(data => {
      console.log(data);
      result = data;
    });
    console.log(result);
    this.navigateToResult(result);
  }

 navigateToResult(result: number) {
    if(result != undefined){
      const navigationExtras: NavigationExtras = {
        queryParams: {
          "result" : JSON.stringify(result)
        }
      }
      this.router.navigate(['result'], navigationExtras);
    }
  }

未定义的值被传入路由

推荐答案

getResult() 方法返回可观察值是一个异步操作.因此，您编写的初始代码块将失败，因为 result 在那时将是未定义的.要进一步理解这一点，您应该阅读 JavaScript 的 事件循环.

The returning of the observable value from getResult() method is an asynchronous operation. Because of that, the initial block of code you have written will fail as result will be undefined at that point. To further understand this, you should read up on JavaScript's event loop.

你应该这样做 - 基本上，你在订阅块中处理路由，这样它只会在订阅完成后被调用.这样，result 将包含一个值(而不是未定义)，并且 navigateToResult() 将成功执行，因为它提供了一个有效的参数.

You should do this instead - basically, you handle the routing within the subscribe block such that it will only be called after the subscription has been completed. This way, result will contain a value (instead of being undefined), and navigateToResult() will be successfully executed since it is supplied with a valid parameter.

submitQuiz() {
  this.isSubmitted = true;
  const answers: QuestionAnswer = new QuestionAnswer(Array.from(this.selectedAnswers.keys()), Array.from(this.selectedAnswers.values()));
  let result: number;
  this.quizService.getResult(answers).subscribe(data => {
    result = data;
    console.log(result);
    this.navigateToResult(result);
  });
}

这篇关于如何等到我从 angular 7 的后端 spring boot api 得到响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！