Angular - 等待后端调用完成而不是跳过

Question

New to angular and I have this issue I have been trying to solve. I have looked all around for a solution but with no luck for my situation.

so here is my problem.

I have a call to back end.

private setDocId(document: Document){
    this.api.getInfo(randomNumber: number).subscribe(data => {
    if (data === 1) {
      document.id = data;
       }
    })
}

regular validation check

   private checkIfDocExists(document: Document){
    return document.isExists ? document.approved = true : document.approved = false:
}

validation both methods

private isValid(): boolean {
   this.setDocId(document);
   const isExists = this.checkIfDo1cExists(document);
   return isExists && document.id !== null;
}

as you can see last method returns validation if both conditions are true; both condition are true, however since the backend call does not wait and continues it returns false since it has not completed initialization yet.

is there a way to let first method (with api call to back end) to wait to finish before it continues? without using setInterval or setTimeout?

thanks.

Answer 1

You can use async and await to let the first method complete first.

private async setDocId(document: Document){
    const data = await this.api.getInfo(randomNumber: number).toPromise();
    if (data === 1) {
      document.id = data;
    }
}

private isValid(): boolean {
   await this.setDocId(document);
   ...
}

I think you could get this to work by using a BehaviorSubject and performing the check inside setDocId .

private isValidSubject = new BehaviorSubject<boolean>(false);
isValid$ = this.isValidSubject

private setDocId(document: Document): void {
    this.api.getInfo(randomNumber)
    .pipe(
        map(data => {
            if (data === 1) {
                document.id = data;
                const isExists = this.checkIfDo1cExists(document);
                this.isValidSubject.next(isExists && document.id !== null);
            }
        }),
    ).subscribe();
}