Angular / RX JS - ожидание завершения AJAX запроса - PullRequest
Новая
       3

Angular / RX JS - ожидание завершения AJAX запроса

1 голос
/ 19 марта 2020 
export class DropDownService {
    private dockerURL;
     constructor(private infoService: InfoService){
            this.infoService.getVersion().subscribe((URL) => {
                 this.dockerURL = URL;
             });
            // How to make sure the dockerURL is loaded
            // before getStructureType is invoked from other services
    }
   getStructureType(): Observable<StructureType[]> {
       return this.http.get<StructureType[]>(this.dockerURL+'/structureType');
    }
}

Как убедиться, что dockerURL загружен до вызова getStructureType из других служб?

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Для этого вы можете воспользоваться switchMap.

Примерно так: 

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';
.....
export class DropDownService {
    private dockerURL;
     constructor(private infoService: InfoService){

     }

   getStructureType(): Observable<StructureType[]> {
       return this.getDockerURL().pipe(
          switchMap(url => {
             return this.http.get<StructureType[]>(url+'/structureType');
          }),
       );
    }

  private getDockerURL(): Observable<string> {
    if (this.dockerURL) {
      return of(this.dockerURL);
    } else {
      return this.infoService.getVersion().pipe(
       // tap is an operator that is used for side effects, every time this stream emits, we assign it to this.dockerURL. Should only be once.
       tap(url => this.dockerURL = url),
      );
    }
  }
}

Таким образом, он гарантирует заполнение dockerURL перед выполнением HTTP-вызова.

0 голосов
/ 19 марта 2020

Subscribe поставляется с функциями обратного вызова err и success. Вы можете вызвать getStructureType в случае успешного обратного вызова. Обратный вызов успеха вызывается только после завершения запроса. 

this.infoService.getVersion().subscribe((URL) => {
       //...
   },
    err => { //========> if fails this gets called
        console.log(err );
    }
    suc => { // =======> gets called on success when its successfully executed
       this.dockerURL = URL;
       this.http.get<StructureType[]>(this.dockerURL+'/structureType');
    }
);
...