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.
/** POST: add a new hero to the database */
addHero(hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
.pipe(
catchError(this.handleError('addHero', hero))
);
}
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.
The HeroesComponent
initiates the actual POST operation by subscribing to the Observable
returned by this service method.
this.heroesService
.addHero(newHero)
.subscribe(hero => this.heroes.push(hero));
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.
/** DELETE: delete the hero from the server */
deleteHero(id: number): Observable<unknown> {
const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
return this.http.delete(url, httpOptions)
.pipe(
catchError(this.handleError('deleteHero'))
);
}
The HeroesComponent
initiates the actual DELETE operation by subscribing to the Observable
returned by this service method.
this.heroesService
.deleteHero(hero.id)
.subscribe();
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.
// oops ... subscribe() is missing so nothing happens
this.heroesService.deleteHero(hero.id);
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.
/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero(hero: Hero): Observable<Hero> {
return this.http.put<Hero>(this.heroesUrl, hero, httpOptions)
.pipe(
catchError(this.handleError('updateHero', hero))
);
}
As for any of the HTTP methods that return an observable, the caller, HeroesComponent.update()
must 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.
import { HttpHeaders } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'my-auth-token'
})
};
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.
httpOptions.headers =
httpOptions.headers.set('Authorization', 'my-new-auth-token');