web-dev-qa-db-fra.com

Comment utiliser reportProgress dans HttpClient dans Angular?

Je télécharge un fichier à l'aide de la méthode HTTPPOST. Je souhaite appeler une autre méthode pour afficher la progression du téléchargement à l'utilisateur final jusqu'à la fin du téléchargement du fichier. Comment utiliser reportProgress dans HttpClient pour cela.

  downfile(file: any): Observable<any> {

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }
angularhttpclientangular7
11
karthik thurairaja

Vous devez utiliser reportProgress: true pour afficher une progression de tout HTTP demande. Si vous voulez voir all events, including the progress of transfers vous devez utiliser observe: 'events' également et retourne un Observable de type HttpEvent. Ensuite, vous pouvez attraper tous les events(DownloadProgress, Response..etc) dans la méthode des composants. Trouvez plus de détails dans Angular Official Documentation . 

  downfile(file: any): Observable<HttpEvent<any>>{

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, observe: "events", headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }

Ensuite dans le composant, vous pouvez attraper tous les events comme ci-dessous. 

this.myService.downfile(file)
    .subscribe(event => {

        if (event.type === HttpEventType.DownloadProgress) {
            console.log("download progress");
        }
        if (event.type === HttpEventType.Response) {
            console.log("donwload completed");
        }
});

Trouver HttpEventTypes ici.

20
Sudarshana Dayananda

vous devrez ajouter HttpClientModule dans votre AppModule

vous devez d'abord créer un objet de demande en créant une instance de la classe HttpRequest et en utilisant l'option reportProgress.

Pour plus d'informations, veuillez consulter: https://alligator.io/angular/httpclient-intro/

1
Shilpa Soni