mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
8ef5cc680d
**Unit Testing Code Does Not Compile** The compilation error is: ``` The compilation error is ./src/testing/http-client.spec.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: /home/projects/obk3vc--run/src/testing/http-client.spec.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. ``` I’m not sure what to say about unit testing HTTP in a full Standalone app. Is it different? _This is the only known remaining defect in this conversion of HTTP to Standalone._ **Edited content of `http-request-data-from-server.md`** The current version of this page is confusing. In particular * It tells readers they **should always unsubscribe** from the HttpClient method calls. This is *not true* and this example doesn't even do it. I replaced this instruction with more nuanced advice and an explanation of why it is OK to not unsubscribe to HttpClient methods. * There is a "helpful" note about using the RxJS `map` operator to transform the response. This is *not "helpfulf"*. It is *confusing* because the sample doesn't use `map` anywhere. It was unnecessary here, even if it might be helpful elsewhere. I removed this note. * The "Requesting a typed response" section seemed unclear to me, particularly because the guide begins with a `get` request that already has the `Config` return type specification. My revision attempts to make this more clear. * The bold "callout" about the `observe` and `responseType` options appears out of nowhere after "Requesting a typed response". It's disconcerting at best. I moved it to the bottom of the page and linked to it from the `options` discussion at the top. I made a few other revisions that I hope improve the readability of this page. **Corrected `http-make-jsonp-request.md`** The JSONP example, handwritten in the guide page, would not have compiled. I added one that does to `heroes.service.ts` and displayed it on this page. **Corrected `http-handle-request-errors.md` This page ended with a section called "Sending data to a server" that introduces PUT, POST, and DELETE. These features have nothing to do with error handling and the verbiage here duplicates the opening paragraphs of the next topic which does: "Send data to a server". So I deleted this section from the error handling guide page. **Archived http-setup-server-communication.md** `http-setup-server-communication.md` appears to be the original long document that has since been divided over the other pages in this folder. It shouldn’t be in the reader’s flow. I did update it for Standalone. But I also removed it from left-nav and marked as archived. PR Close #51400
86 lines
4.6 KiB
Markdown
86 lines
4.6 KiB
Markdown
# HTTP: Send data to a server
|
|
|
|
In addition to fetching data from a server, `HttpClient` supports other HTTP methods such as PUT, POST, and DELETE, which you can use to modify the remote data.
|
|
|
|
The sample app for this guide includes an abridged version of the "Tour of Heroes" example that fetches heroes and enables users to add, delete, and update them.
|
|
The following sections show examples of the data-update methods from the sample's `HeroesService`.
|
|
|
|
## Make a POST request
|
|
|
|
Apps often send data to a server with a POST request when submitting a form.
|
|
In the following example, the `HeroesService` makes an HTTP POST request when adding a hero to the database.
|
|
|
|
<code-example header="app/heroes/heroes.service.ts (addHero)" path="http/src/app/heroes/heroes.service.ts" region="addHero"></code-example>
|
|
|
|
The `HttpClient.post()` method is similar to `get()` in that it has a type parameter, which you can use to specify that you expect the server to return data of a given type.
|
|
The method takes a resource URL and two additional parameters:
|
|
|
|
| Parameter | Details |
|
|
|:--- |:--- |
|
|
| body | The data to POST in the body of the request. |
|
|
| options | An object containing method options which, in this case, specify required headers. |
|
|
|
|
The example catches errors as [described above](guide/http-handle-request-errors#error-details).
|
|
|
|
The `HeroesComponent` initiates the actual POST operation by subscribing to the `Observable` returned by this service method.
|
|
|
|
<code-example header="app/heroes/heroes.component.ts (addHero)" path="http/src/app/heroes/heroes.component.ts" region="add-hero-subscribe"></code-example>
|
|
|
|
When the server responds successfully with the newly added hero, the component adds that hero to the displayed `heroes` list.
|
|
|
|
## Make a DELETE request
|
|
|
|
This application deletes a hero with the `HttpClient.delete` method by passing the hero's ID in the request URL.
|
|
|
|
<code-example header="app/heroes/heroes.service.ts (deleteHero)" path="http/src/app/heroes/heroes.service.ts" region="deleteHero"></code-example>
|
|
|
|
The `HeroesComponent` initiates the actual DELETE operation by subscribing to the `Observable` returned by this service method.
|
|
|
|
<code-example header="app/heroes/heroes.component.ts (deleteHero)" path="http/src/app/heroes/heroes.component.ts" region="delete-hero-subscribe"></code-example>
|
|
|
|
The component isn't expecting a result from the delete operation, so it subscribes without a callback.
|
|
Even though you are not using the result, you still have to subscribe.
|
|
Calling the `subscribe()` method *executes* the observable, which is what initiates the DELETE request.
|
|
|
|
<div class="alert is-important">
|
|
|
|
You must call `subscribe()` or nothing happens.
|
|
Just calling `HeroesService.deleteHero()` does not initiate the DELETE request.
|
|
|
|
<code-example path="http/src/app/heroes/heroes.component.ts" region="delete-hero-no-subscribe"></code-example>
|
|
</div>
|
|
|
|
|
|
## Make a PUT request
|
|
|
|
An app can send PUT requests using the HTTP client service.
|
|
The following `HeroesService` example, like the POST example, replaces a resource with updated data.
|
|
|
|
<code-example header="app/heroes/heroes.service.ts (updateHero)" path="http/src/app/heroes/heroes.service.ts" region="updateHero"></code-example>
|
|
|
|
As for any of the HTTP methods that return an observable, the caller, `HeroesComponent.update()` [must `subscribe()`](guide/http-request-data-from-server#always-subscribe "Why you must always subscribe.") to the observable returned from the `HttpClient.put()` in order to initiate the request.
|
|
|
|
## Add and updating headers
|
|
|
|
Many servers require extra headers for save operations.
|
|
For example, a server might require an authorization token, or "Content-Type" header to explicitly declare the MIME type of the request body.
|
|
|
|
### Add headers
|
|
|
|
The `HeroesService` defines such headers in an `httpOptions` object that are passed to every `HttpClient` save method.
|
|
|
|
<code-example header="app/heroes/heroes.service.ts (httpOptions)" path="http/src/app/heroes/heroes.service.ts" region="http-options"></code-example>
|
|
|
|
### Update headers
|
|
|
|
You can't directly modify the existing headers within the previous options
|
|
object because instances of the `HttpHeaders` class are immutable.
|
|
Use the `set()` method instead, to return a clone of the current instance with the new changes applied.
|
|
|
|
The following example shows how, when an old token expires, you can update the authorization header before making the next request.
|
|
|
|
<code-example linenums="false" path="http/src/app/heroes/heroes.service.ts" region="update-headers"></code-example>
|
|
|
|
<a id="url-params"></a>
|
|
|
|
@reviewed 2023-03-16
|