在Angular 8中使用用户通知实现异步调用的最佳方法

我想在Angular 8中添加一个异步调用来下载一些文件

实际上，当我调用该方法时，我下载文件（csv），但有时，当csv包含很多行时，延迟很长，它会阻塞ui

目标是：

当我调用该方法时：

它必须以异步模式运行

当文件准备就绪时，我必须在UI中通知用户

用户从链接下载文件（随附通知）

实现此功能的最佳方式是什么

以下是Angular 8的源代码，它与Jakarta EE的API的方法调用和后端相关

角度8:

private handleExportCSV(): void {
    const target: AssetSearchCriteria = this.assetTargetConfig;

    this.actionTriggerMap.set('EXPORT_CSV', new EventEmitter());
    const trigger = this.actionTriggerMap.get('EXPORT_CSV');
    const dialogRef = this.openDialog('EXPORT_CSV', target, trigger);

    trigger.subscribe((event: MenuActionMessage) => {
      // The call here
      this.assetService.exportAssets(target).then((response: Response) => {
        this.downloadFile(response);
        dialogRef.close();
      });
    });
}
  
// Service
public async exportAssets(target: AssetSearchCriteria): Promise<Response> {
    let targetIds;

    const params = new URLSearchParams();
    const headers = this.httpService.buildHttpHeadersInfos();

    // Build request params

    if (target.filterText) {
        params.set('filter', target.filterText);
      }
    }

    // Build request body
    const payload: ExportRequest = {displayUnits: null};
    payload.displayUnits = targetIds;
    if (target && target.searchWizardCriteria && target.searchWizardActive) {
      payload.searchCriterias = target.searchWizardCriteria;
    }

    const options = new RequestOptions({headers, params});

    const path = new UrlBuilder(
      environment.APP_CONTEXT + api_resources.EXPORT_ASSETS
    ).build();

    return this.httpService
      .post(path, JSON.stringify(payload), options)
      .toPromise();
}

@POST
@Path("/export")
@Produces(APPLICATION_OCTET_STREAM)
@Authorization(GLOBAL_VIEW)
public Response export(AssetExportModel exportModel, 
            @DefaultValue("") @QueryParam("filter") String filter) throws FrameworkTechnicalException {

        QueryConfig configuration = buildQueryConfig(filter, null);

        List<AssetSearchResultDTO> searchResultList = asset.export(configuration);

        // Build CSV File
        return buildExportResponse(buildAssetsFile(searchResultList));

}

private handleExportCSV（）：void{
常量目标：AssetSearchCriteria=this.assetTargetConfig；
this.actionTriggerMap.set（'EXPORT_CSV'，new EventEmitter（））；
const trigger=this.actionTriggerMap.get（'EXPORT_CSV'）；
const dialogRef=this.openDialog（'EXPORT_CSV'，target，trigger）；
trigger.subscribe（（事件：MenuActionMessage）=>{
//这里的电话
this.assetService.exportAssets（目标）。然后（（响应：响应）=>{
此.downloadFile（响应）；
dialogRef.close（）；
});
});
}
//服务
公共异步导出资产（目标：AssetSearchCriteria）：承诺{
让targetIds；
const params=新的URLSearchParams（）；
const headers=this.httpService.buildHttpHeadersInfo（）；
//生成请求参数
if（target.filterText）{
参数集（'filter'，target.filterText）；
}
}
//生成请求主体
常量有效负载：ExportRequest={displayUnits:null}；
payload.displayUnits=targetId；
if（target&&target.searchWizardCriteria&&target.searchWizardActive）{
payload.searchCriterias=target.searchWizardCriterias；
}
const options=newrequestoptions（{headers，params}）；
const path=新的UrlBuilder(
environment.APP\u CONTEXT+api\u resources.EXPORT\u资产
).build（）；
返回此.httpService
.post（路径，JSON.stringify（有效负载），选项）
.toPromise（）；
}

后端（雅加达EE）：

private handleExportCSV(): void {
    const target: AssetSearchCriteria = this.assetTargetConfig;

    this.actionTriggerMap.set('EXPORT_CSV', new EventEmitter());
    const trigger = this.actionTriggerMap.get('EXPORT_CSV');
    const dialogRef = this.openDialog('EXPORT_CSV', target, trigger);

    trigger.subscribe((event: MenuActionMessage) => {
      // The call here
      this.assetService.exportAssets(target).then((response: Response) => {
        this.downloadFile(response);
        dialogRef.close();
      });
    });
}
  
// Service
public async exportAssets(target: AssetSearchCriteria): Promise<Response> {
    let targetIds;

    const params = new URLSearchParams();
    const headers = this.httpService.buildHttpHeadersInfos();

    // Build request params

    if (target.filterText) {
        params.set('filter', target.filterText);
      }
    }

    // Build request body
    const payload: ExportRequest = {displayUnits: null};
    payload.displayUnits = targetIds;
    if (target && target.searchWizardCriteria && target.searchWizardActive) {
      payload.searchCriterias = target.searchWizardCriteria;
    }

    const options = new RequestOptions({headers, params});

    const path = new UrlBuilder(
      environment.APP_CONTEXT + api_resources.EXPORT_ASSETS
    ).build();

    return this.httpService
      .post(path, JSON.stringify(payload), options)
      .toPromise();
}

@POST
@Path("/export")
@Produces(APPLICATION_OCTET_STREAM)
@Authorization(GLOBAL_VIEW)
public Response export(AssetExportModel exportModel, 
            @DefaultValue("") @QueryParam("filter") String filter) throws FrameworkTechnicalException {

        QueryConfig configuration = buildQueryConfig(filter, null);

        List<AssetSearchResultDTO> searchResultList = asset.export(configuration);

        // Build CSV File
        return buildExportResponse(buildAssetsFile(searchResultList));

}

@POST
@路径（“/export”）
@生成（应用程序\u八位字节\u流）
@授权（全局视图）
公共响应导出（AssetExportModel导出模型，
@DefaultValue（“”@QueryParam（“筛选器”）字符串筛选器）引发FrameworkTechnicalException{
QueryConfig配置=buildQueryConfig（过滤器，null）；
列表searchResultList=asset.export（配置）；
//生成CSV文件
返回buildExportResponse（BuildAssetFile（searchResultList））；
}

您可以通过检查是否收到http请求的结果来实现这一点。 您可以使用异步管道，也可以在.ts文件中订阅。（或者，像你那样）

在html模板中，检查是否已收到结果，并根据变量isLoadingResults显示一些内容。您的ui正在自动更新，您无需通知它

<div *ngIf="isLoadingResults; else resultReceived">
<mat-spinner></mat-spinner>
You see this even when you didnt get the result
</div> 

<ng-template #resultReceived>
The result of your http-request came in!
</ng-template>

即使你没有得到结果，你也会看到这一点
您的http请求的结果出现了！

如果我没弄错的话，这就是你想要的行为。如果没有，请随意评论
你也可以查看文档，他们在那里做了很好的解释。