Question

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

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

当我单击一个按钮时，将执行一个函数，并且将进行一次http发布调用，然后我需要将响应从发布请求传递到新路线

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。

您应该改为执行此操作-基本上，您可以处理subscribe块中的路由，以便仅在预订完成后才调用它。这样，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);
    }
  }

我对上面的代码进行了更改。由于Angular的工作方式基于事件循环，因此将代码移到订阅内部，而订阅事件之外的任何事件都是单独的事件，因此继续执行。

如何等待直到我收到Angular 7中后端Spring Boot API的响应

2 个答案: