Как ждать ответа от backend spring boot api in angular 7 - PullRequest
Новая
       2

Как ждать ответа от backend spring boot api in angular 7

0 голосов
/ 10 мая 2019

Я хотел перейти с одного маршрута на другой, используя метод 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);
    }
  }

значение undefined передается в маршрут

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Возвращение наблюдаемого значения из метода getResult() является асинхронной операцией.Из-за этого начальный блок кода, который вы написали, потерпит неудачу, так как result будет неопределенным в этой точке.Чтобы лучше это понять, вы должны прочитать цикл JavaScript .

. Вы должны сделать это вместо этого - в основном вы обрабатываете маршрутизацию внутри блока подписки таким образом, что он будет вызываться только послеподписка была завершена.Таким образом, 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);
  });    
}
0 голосов
/ 10 мая 2019 
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 работает на основе цикла Event, а все, что находится за пределами подписки, является отдельным событием, которое продолжает выполняться.

...