mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
# 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.
|
|
|
|
<code-example header="app/uploader/uploader.service.ts (upload request)" path="http/src/app/uploader/uploader.service.ts" region="upload-request"></code-example>
|
|
|
|
<div class="alert is-important">
|
|
|
|
**TIP**: <br />
|
|
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.
|
|
|
|
</div>
|
|
|
|
## 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)\).
|
|
|
|
<code-example header="app/uploader/uploader.service.ts (upload body)" path="http/src/app/uploader/uploader.service.ts" region="upload-body"></code-example>
|
|
|
|
The `getEventMessage` method interprets each type of `HttpEvent` in the event stream.
|
|
|
|
<code-example header="app/uploader/uploader.service.ts (getEventMessage)" path="http/src/app/uploader/uploader.service.ts" region="getEventMessage"></code-example>
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
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.
|
|
|
|
</div>
|
|
|
|
@reviewed 2023-02-27
|