如何等到我从后端 spring boot api in angular 7 收到响应

Question

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

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

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

Quiz.service.ts

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

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);
    }
  }

未定义的值被传递到路由中

Answer 1

从getResult() 方法返回可观察值是一个异步操作。因此，您编写的初始代码块将失败，因为此时 result 将未定义。要进一步了解这一点，您应该阅读 JavaScript 的 event loop。

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

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);
  });    
}

Answer 2

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;
      //move inside subscribe
      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);
    }
  }

我已经对上面的代码进行了修改。将代码移到 subscribe 中，因为 Angular 的工作方式是基于事件循环的，而 subscribe 事件之外的任何事情都是一个单独的事件，会继续执行。

如何等到我从后端 spring boot api in angular 7 收到响应

How to wait till i get a response from backend spring boot api in angular 7

angular

angular5

angular6

angular7