Question

在打开对话框窗口之前，我想加载数据：

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

服务为：

    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;
        }
    }

我只想等待响应，然后打开对话框窗口。

Answer 1

异步/等待要求被调用的方法返回一个Promise，而不是一个Observable。

您需要将loadDocuments(...)方法更改为：

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

Answer 2

您可以使用订阅方法：

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

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

Answer 3

您有两种选择来实现此功能。

将await与http请求一起使用。我认为您已尝试做。默认情况下，由于每个原因，Angular httpclient对于每个http请求都返回Observable，因此您必须将toPromise（）添加到与此类似的http调用中

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

这将返回一个等待的诺言，然后您可以使用已提供的代码。当然，调用方方法必须异步才能使用await。

如果您不想使用异步函数，请在我提供的服务中使用相同的代码，然后使用.then方法

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

Answer 4

关于您处于Angular环境中的事实，建议使用Observables。您可以在Observable上调用subscription方法来处理此问题。

要对Observable和Promise进行更多说明，主要区别是Observable可以表示为“流”而不是Promise，并且可以添加不同的操作来处理流（参见https：// rxjs .dev / guide / overview）。

了解可观察概念是Angular应用程序中必须具备的。

如何等待在Angular中加载数据

4 个答案: