CODEWITHSUNDEEP
angular
MMMWeirdo
MMMWeirdo

Reputation: 347

Angular http client with progress

I’m a bit stuck, originally I had a function to fire a post request and return an observable of my response interface :

post(url:string) : Observable<ApiResponseInterface>
{
    return this.httpClient.post(url);

}

Now when I add the ability to report progress and monitor events it now want to return Observable

I’m not sure how I can catch the event for the progress and also still return my ApiResponseInterface observable.

I can subscribe to the HttpEvent observable for the progress

this.httpClient.post(url,{reportProgress:true, observe: “events”}).subscribe((event:HttpEvent)=>{
    // update progress bar

});

This is all good but after it’s finished I want my normal observable to use in the rest of the software. How would I do that ? I assume as a guess there is a way to return my observable once the http request is complete but I’m not sure how in this case.

Upvotes: 2

Views: 4952

Answers (1)

Mehyar Sawas
Mehyar Sawas

Reputation: 1266

Try angular doc solution:

It depends on where you want to handle your progress bar update. But lets say that you want to do that directly in your post method. In this case rxjs tap operator is a good tool to do something with the response before it continue its was to the subscriber. And using the rxjs last operator returns only the last emitted value which is the complete event in this case.

post() {
  this.http.request(req).pipe(
    tap(event => {
      if (event.type == HttpEventType.UploadProgress) {
          // update the progress bar
      }
    }),
    last() // return last (completed) message to caller
  );
}

https://angular.io/guide/http#tracking-and-showing-request-progress

Upvotes: 1

Related Questions