Ждите ответа от HttpClient get - синхронный вызов

Question

Мне интересно, как ждать ответа от действия HttpClient, вызывающего бэкэнд, мне нужно подождать, пока бэкэнд не даст ответ (синхронный вызов), подход classi c состоит в том, чтобы подписаться на Observable Ответ:

//My component
...
console.log("before");
this.myService.getSomeThingFromBackend('param_value').subscribe(response => {
     console.log("do my stuff");
}
console.log("after");

//My Service
...
getSomeThingFromBackend(param: string): Observable<any>{
        return this.httpClient.get(this.host + this.url+ "/" + param);
}

это показывает:

before

after

do my stuff

И я хочу этот результат:

before

do my stuff

after

Answer 1

Этот процесс работает асинхронно, поэтому вы не можете заставлять его ждать других вещей, пока они не попадут в область ответа. Вы можете написать этот вызов в той же области или создать функцию и вызывать ее изнутри.

//My component

...
console.log("before");
this.myService.getSomeThingFromBackend('param_value').subscribe(response => {
     console.log("do my stuff");
     doSomeStuff();
}

doSomeStuff(){
    console.log("after");
}

//My Service
...
getSomeThingFromBackend(param: string): Observable<any>{
        return this.httpClient.get(this.host + this.url+ "/" + param);
}

Answer 2

Angular s this.http.get возвращает Rx JS Наблюдаемый . Затем вызов this.http.get(...).subscribe(...) возвращает объект Rx JS Subscription. Никто из них не возвращает Promise, поэтому вы не можете использовать их с await.

. Если вы хотите использовать await с Observables, вы должны использовать toPromise() вместо subscribe(), что возвращает Обещание, которое разрешается с помощью первого значения, испускаемого этим Наблюдаемым (оно внутренне вызывает для вас subscribe и оборачивает его объектом Обещания).

await this.http.get(...).toPromise(value => {
  ...
});

Answer 3

Поскольку риск звучания очевиден ... если вы хотите выполнять одно действие за другим, переместите действие, которое находится не в том месте.

//My component
...
console.log("before");
this.myService.getSomeThingFromBackend('param_value').subscribe(response => {
  console.log("do my stuff");
  console.log("after");
}

//My Service
...
getSomeThingFromBackend(param: string): Observable<any> {
  return this.httpClient.get(this.host + this.url+ "/" + param);
}

Все остальное, что вы делаете, - это звук. Вы возвращаете наблюдаемое из сервиса, подписываетесь на него в компоненте и запускаете действие в подписке.