1.9 KiB
HTTP - Track and show request progress
Sometimes applications transfer large amounts of data and those transfers can take a long time. File uploads are a typical example. You can give the users a better experience by providing feedback on the progress of such transfers.
Make a request
To make a request with progress events enabled, create an instance of HttpRequest with the reportProgress option set true to enable tracking of progress events.
TIP:
Every progress event triggers change detection, so only turn them on if you need to report progress in the UI.
When using HttpClient.request() with an HTTP method, configure the method with observe: 'events' to see all events, including the progress of transfers.
Track request progress
Next, pass this request object to the HttpClient.request() method, which returns an Observable of HttpEvents the same events processed by [interceptors](guide/http-intercept-requests-and-responses#interceptor-events).
The getEventMessage method interprets each type of HttpEvent in the event stream.
The sample app for this guide doesn't have a server that accepts uploaded files.
The UploadInterceptor in app/http-interceptors/upload-interceptor.ts intercepts and short-circuits upload requests by returning an observable of simulated events.
@reviewed 2023-02-27