diff --git a/aio/content/guide/http-send-data-to-server.md b/aio/content/guide/http-send-data-to-server.md index 5409901f9dd..d4cae902ed9 100644 --- a/aio/content/guide/http-send-data-to-server.md +++ b/aio/content/guide/http-send-data-to-server.md @@ -1,3 +1,87 @@ -# Send data to a server +# HTTP: Send data to a server -@reviewed 2022-10-06 +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. + + + +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](#adding-headers). | + +The example catches errors as [described above](#error-details). + +The `HeroesComponent` initiates the actual POST operation by subscribing to the `Observable` returned by this service method. + + + +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. + + + +The `HeroesComponent` initiates the actual DELETE operation by subscribing to the `Observable` returned by this service method. + + + +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. + +
+ +You must call `subscribe()` or nothing happens. +Just calling `HeroesService.deleteHero()` does not initiate the DELETE request. + +
+ + + + +## 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. + + + +As for any of the HTTP methods that return an observable, the caller, `HeroesComponent.update()` [must `subscribe()`](#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. + + + +### 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. + + + + + +@reviewed 2022-11-07