0

Before opening dialog window I want to load data:

const documents = await this.documentService.loadDocuments(this.application.reglamentid);
     this.documentService.setDocuments(documents);
     dialog.open();

Service is:

    export class DocumentService {
        private documents: any[] = [];
    
        constructor(private http: HttpClient) {}
    
        loadDocuments(reglamentId: number): Observable<any[]> {
            return this.http.get<Department[]>(`${environment.apiUrlDocuments}/Generation/documents?reglamentId=${reglamentId}`);
        }
    
        getDocuments() {
            return this.documents;
        }
    
        setDocuments(documents): void {
            this.documents = documents;
        }
    }

I want to await a response only then to open a dialog window.

Improve this question
2
  • Please try async pipe < angular.io/api/common/AsyncPipe>? Commented Aug 11, 2020 at 14:23
  • No I can not use it, I try await observable in component Commented Aug 11, 2020 at 14:24

4 Answers 4

Reset to default
1

async / await requires that the method being called returns a Promise, not an Observable.

You'll need to change your loadDocuments(...) method to:

async loadDocuments(reglamentId: number): Promise<any[]> {
  return this.http.get<Department[]>(`${environment.apiUrlDocuments}/Generation/documents?reglamentId=${reglamentId}`).toPromise();
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you, so I need convert it to promise, right?
Yes. async/await is Promise-based.
Why do you use async before loadDocument if I use async in outside?
In order to be await(able) the method has to be marked as async.
I'm only stating that because I don't have any other code to reference. If your outer method, like a lifecycle method, is marked as async, then you can drop the async from loadDocuments()
1

You can use subscribe method:

this.documentService.loadDocuments(this.application.reglamentid)
   .subscribe(documents => {
      this.documentService.setDocuments(documents);
      dialog.open();
   }

https://angular.io/guide/observables-in-angular#observables-in-angular

Improve this answer

Comments

0

You have two options to achieve this functionality.

Using the await with the http request. I think that what you have tried to do. By default angular httpclient returns Observable for every http request for this reason you have to add toPromise() to the http call similar to this one

async loadDocuments(reglamentId: number): Observable<any[]> {
        return this.http.get<Department[]>(`${environment.apiUrlDocuments}/Generation/documents?reglamentId=${reglamentId}`).toPromise();
    }

This will return an awaitable promise and then you can use the code what you have provided code. Of couse the caller method has to be async in order to use await.

If you dont want to use async functions then using the same code in the service I provided and then using the .then method

this.documentService.loadDocuments(this.application.reglamentid).then((documents)=>{
   this.documentService.setDocuments(documents);
   dialog.open();
});
Improve this answer

Comments

0

Regarding the fact that you are in an Angular environment, it is recommended to use Observables. You can call the subscribe method on an Observable to handle this.

To give more explanations on Observable and Promise, the main difference is that an Observable could be represented as a "stream" and not the Promise, and you could add different operations to handle the stream (cf.https://rxjs.dev/guide/overview).

Understanding the Observable concept is a must-have in Angular application.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.