Add task with the HTTP client
The TaskService
We just communicated with our API server to retrieve a list of tasks. Now we want to update the API server list by adding a new task.
Based on the HTTP protocol, we will use the post
function to add a task to the list: http.post()
.
This function expects 2 parameters:
- The URL of the API server
- The task to send to the server
As JSON-server is able to generate an id
for us, we wonโt use uuid
to generate an id
for the task.
This new addTask
function defines our contract with the API server:
- it makes a POST request
- it sends a
Task
object as a request body - it communicates with the API server at
http://localhost:3000/tasks
๐ Instructions
-
Open the
src/app/task.service.ts
file. -
Add the following code to the file:
Update the TaskFormComponent
In the previous step, we explained Observables need to be subscribed to in order to execute the request.
We wera able to use the async
pipe in the HTML template to subscribe to the observable.
But in the current situation, the request does happen in the component.ts file.
We need to subscribe to the observable by using the subscribe
function.
๐ Instructions
-
Open the
src/app/task-form/task-form.component.ts
file. -
Add the following code to the file:
It now works, but not exactly as we should expectโฆ
Asynchronous programming
Remember the newsletter example from the previous chapter? Given thatโs a physical newsletter, it takes time to be delivered to your mailbox. Some time happen between the moment you subscribe and the moment you receive the newsletter.
Thatโs the same in our situation.
By sending a request with the subscribe()
function, weโre asking the server to add a task to the list.
But the navigation to the /tasks
route will happen immediately after the request is sent, not after the request is completed.
Letโs review the code we just changed in the submit
function of the TaskFormComponent
:
- We call the
addTask
function from theTaskService
to add a task to the API server. - We navigate to the
/tasks
route.
API communication is asynchronous, meaning that the addTask
function will not be executed immediately.
Our server is served locally, so the request will be fast, but itโs still asynchronous.
A request to the server can take a long time if the server or the network is slow for any reason.
In this situation, While the request is still being processed, the router.navigate
function will be executed.
Thatโs not what we want as by navigating, we want to display the updated task list.
We need to wait for the response from the server before navigating to the /tasks
route.
The Subscription
The subscribe function accepts a callback function as a parameter. This callback function will be executed when the observable emits a value.
Weโll use this callback function to navigate to the /tasks
route.
Open the src/app/task-form/task-form.component.ts
file.
Update the following code to the file:
โ๏ธ What you learned
In this chapter, you learned how to add a task to a list using the HTTP client in an Angular application.