Angular HttpClient - 在等待服务响应时显示微调器/进度指示器 - 进度事件

时间:2017-08-04 17:14:37

标签: angular

我切换了我的服务调用以使用新的HttpClient。我正在努力解决三件事

  1. 了解如何在等待时显示微调器/进度条/等 对于来自帖子的回复,获取,放置。
  2. 假响应缓慢
  3. 是否可以使用新的进度事件来触发此类功能?
  4. application.component.ts

     this.applicationFormService.putForm(formModel)    
      .subscribe(
        // Successful responses call the first callback.
        (res) => this.goToRoute(res),
        // Errors will call this callback instead:
        (err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
            console.log("Client-side error occured.");
          } else {
            console.log("Server-side error occured.");
          }
        },
        //Tried adding progress event logic here but I get error Argument of type '(event: any) => void' is not assignable to parameter of type '() => void'. Is this totally the wrong implementation and can it even be used for showing progress?
        event => {
          // Via this API, you get access to the raw event stream.
          // Look for upload progress events.
          if (event.type === HttpEventType.UploadProgress) {
            // This is an upload progress event.
          } else if (event instanceof HttpResponse) {
    
          }
        }
      )
    

    application.service.ts

    constructor (private httpNew: HttpClient){}
    putForm(applicationForm:any){
     this.applicationId = this.id.id
     const req = new HttpRequest('PUT', this.applicationSubmitUrl+this.applicationId, applicationForm, {
      reportProgress: true,
     });
    return this.httpNew.request(req)
    }
    

2 个答案:

答案 0 :(得分:5)

使用以下代码

创建一个微调器组件
import { Component, Input } from '@angular/core';

@Component({
    selector: 'spinner',
    template:
    ` <div *ngIf="show">
          <span><i class="fa fa-spinner fa-spin" [ngStyle]="{'font-size': size+'px'}" aria-hidden="true"></i></span>
      </div>
    `
})
export class SpinnerComponent {
    @Input() size: number = 25;
    @Input() show: boolean;


}

在主要组件中,添加组件标记,如下所示

<spinner [show]="showSpinner" [size]="150"> </spinner>

在你的打字稿代码中

this.applicationFormService.putForm(formModel)    
  .subscribe(data=>{
        ....
       // hide the spinner
       this.showSpinner = false;

    }(err: HttpErrorResponse) => {
       this.showSpinner = false;          
    })

显示您正在进行服务调用的微调器,例如组件的onInit

ngOnInit(){
   this.showSpinner = true;
   ...service call logics...
}

<强> LIVE DEMO

答案 1 :(得分:4)

我将@aravind的答案和这篇文章(https://alligator.io/angular/httpclient-intro/)结合起来,将解决方案拼凑起来。这利用了Angular的Http客户端进度事件来打开/关闭微调器并处理错误。

成分:

showSpinner = false;
this.shortFormService.postShortForm(formModel)
  .subscribe(      

    (event: HttpEvent<any>) => {
      console.log(event)
      switch (event.type) {
        case HttpEventType.Sent:
          this.showSpinner = true;
          console.log('Request sent!');
          break;
        case HttpEventType.ResponseHeader:
          console.log('Response header received!');
          break;
        case HttpEventType.UploadProgress:
          const percentDone = Math.round(100 * event.loaded / event.total);
          console.log(`File is ${percentDone}% uploaded.`);
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(event.loaded / 1024);
          console.log(`Download in progress! ${ kbLoaded }Kb loaded`);
          break;
        case HttpEventType.Response:
          console.log(' Done!', event.body);
          this.showSpinner = false;            

      }
    },
    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        console.log("Client-side error occured.");
      } else {
        this.router.navigate(['/error', err.error.error]);
        console.log("Server-side error occured.");
      }
    }
  )

}

服务:

postShortForm(shortForm: any) {
 const req = new HttpRequest('POST', this.preCheckUrl, shortForm, {
  reportProgress: true,
});
return this.httpNew.request(req)
  .retry(3)
}