259. Sending a POST Request

Jul 21, 2026 06:00 · 10:11 · English · Whisper Turbo · 2 Kõnelejad
See transkript aegub 7 Kui teil on lisaküsimusi, pidage nõu oma arsti või apteekriga. Täiendamine alaliseks ladustamiseks →
Loenguindeks
Ainult näitamine
0:02
S… Speaker 2 (259. Sending a POST Request)
Now attached,
0:03
S… Speaker 1 (259. Sending a POST Request)
you'll find this project here.
0:04
S… Speaker 1 (259. Sending a POST Request)
It's an Angular project,
0:06
S… Speaker 1 (259. Sending a POST Request)
which I opened here.
0:07
S… Speaker 2 (259. Sending a POST Request)
A very simple project where we have a forum,
0:09
S… Speaker 2 (259. Sending a POST Request)
a template -driven forum,
0:11
S… Speaker 2 (259. Sending a POST Request)
where we can enter a title,
0:12
S… Speaker 1 (259. Sending a POST Request)
content, and then send that post here,
0:15
S… Speaker 1 (259. Sending a POST Request)
like a very simple post in a simple blog,
0:18
S… Speaker 1 (259. Sending a POST Request)
to store it on Firebase.
0:19
S… Speaker 1 (259. Sending a POST Request)
And later,
0:20
S… Speaker 1 (259. Sending a POST Request)
we also want to add logic to fetch all posts that we stored on Firebase
0:24
S… Speaker 1 (259. Sending a POST Request)
and to clear all posts there.
0:27
S… Speaker 1 (259. Sending a POST Request)
But for now,
0:28
S… Speaker 1 (259. Sending a POST Request)
let's go with creating a new post.
0:30
S… Speaker 1 (259. Sending a POST Request)
And for that, if we have a look at our code,
0:32
S… Speaker 1 (259. Sending a POST Request)
you only have the app component and there in the app component TS file,
0:36
S… Speaker 1 (259. Sending a POST Request)
you have onCreatePost,
0:38
S… Speaker 1 (259. Sending a POST Request)
which will actually get some post data in this format.
0:42
S… Speaker 1 (259. Sending a POST Request)
Now let's first of all log that to validate that this
0:46
S… Speaker 1 (259. Sending a POST Request)
is correct and that this works.
0:49
S… Speaker 1 (259. Sending a POST Request)
For that,
0:50
S… Speaker 1 (259. Sending a POST Request)
I opened the developer tools here and now let's write a new post
0:54
S… Speaker 1 (259. Sending a POST Request)
with some content and click send post.
0:58
S… Speaker 1 (259. Sending a POST Request)
And we see that here.
0:59
S… Speaker 1 (259. Sending a POST Request)
So this seems to work.
1:00
S… Speaker 2 (259. Sending a POST Request)
That's perfect.
1:01
S… Speaker 2 (259. Sending a POST Request)
Now,
1:01
S… Speaker 1 (259. Sending a POST Request)
of course we could reset that form here too,
1:03
S… Speaker 2 (259. Sending a POST Request)
if we wanted to,
1:04
S… Speaker 1 (259. Sending a POST Request)
but I'm fine like this.
1:06
S… Speaker 1 (259. Sending a POST Request)
The goal now of course is to not just log that here,
1:09
S… Speaker 1 (259. Sending a POST Request)
but to instead send an HTTP request.
1:12
S… Speaker 1 (259. Sending a POST Request)
And for that,
1:12
S… Speaker 1 (259. Sending a POST Request)
we need Angular's help.
1:14
S… Speaker 1 (259. Sending a POST Request)
To be precise,
1:15
S… Speaker 1 (259. Sending a POST Request)
we need to unlock a new feature,
1:17
S… Speaker 1 (259. Sending a POST Request)
so to say.
1:18
S… Speaker 1 (259. Sending a POST Request)
In the app module,
1:20
S… Speaker 1 (259. Sending a POST Request)
we have to add a new core Angular module or a new module baked
1:24
S… Speaker 1 (259. Sending a POST Request)
into the Angular framework,
1:25
S… Speaker 1 (259. Sending a POST Request)
I should say,
1:26
S… Speaker 1 (259. Sending a POST Request)
which is the HTTP client module.
1:28
S… Speaker 2 (259. Sending a POST Request)
For that,
1:29
S… Speaker 1 (259. Sending a POST Request)
you simply import HTTP client module here
1:34
S… Speaker 1 (259. Sending a POST Request)
from at Angular common slash
1:39
S… Speaker 1 (259. Sending a POST Request)
HTTP.
1:41
S… Speaker 1 (259. Sending a POST Request)
So that package name is at angular slash comment slash HTTP
1:45
S… Speaker 1 (259. Sending a POST Request)
and you import the HTTP client module.
1:47
S… Speaker 1 (259. Sending a POST Request)
Now you add that HTTP client module here
1:52
S… Speaker 1 (259. Sending a POST Request)
in your imports array.
1:54
S… Speaker 1 (259. Sending a POST Request)
Just like that.
1:55
S… Speaker 1 (259. Sending a POST Request)
This now unlocks the HTTP client Angular offers in
1:59
S… Speaker 1 (259. Sending a POST Request)
your whole project.
2:00
S… Speaker 2 (259. Sending a POST Request)
And with that,
2:02
S… Speaker 1 (259. Sending a POST Request)
we can now start sending requests in our app component here.
2:05
S… Speaker 1 (259. Sending a POST Request)
In there,
2:07
S… Speaker 1 (259. Sending a POST Request)
we now just need to inject our HTTP client and I'll store it in a
2:11
S… Speaker 1 (259. Sending a POST Request)
property which I just named HTTP.
2:14
S… Speaker 2 (259. Sending a POST Request)
And it's the HTTP client,
2:16
S… Speaker 1 (259. Sending a POST Request)
which you need to import from at Angular slash comment slash
2:20
S… Speaker 1 (259. Sending a POST Request)
HTTP.
2:21
S… Speaker 1 (259. Sending a POST Request)
So make sure to add this import at the top of your path.
2:24
S… Speaker 2 (259. Sending a POST Request)
Now with it imported,
2:27
S… Speaker 1 (259. Sending a POST Request)
we can use it to send HTTP requests.
2:29
S… Speaker 1 (259. Sending a POST Request)
And how does this work now?
2:30
S… Speaker 1 (259. Sending a POST Request)
Now let's say here in onCreatePost,
2:33
S… Speaker 1 (259. Sending a POST Request)
once we got that post data,
2:34
S… Speaker 1 (259. Sending a POST Request)
we want to send it to Firebase.
2:37
S… Speaker 1 (259. Sending a POST Request)
For this,
2:38
S… Speaker 1 (259. Sending a POST Request)
we can use that injected HTTP service and there you have a
2:42
S… Speaker 1 (259. Sending a POST Request)
couple of methods.
2:43
S… Speaker 1 (259. Sending a POST Request)
These methods are mostly named like the HTTP verbs.
2:47
S… Speaker 1 (259. Sending a POST Request)
So you have get,
2:48
S… Speaker 1 (259. Sending a POST Request)
you have delete,
2:49
S… Speaker 1 (259. Sending a POST Request)
you have post and that will allow you to send different kinds of requests.
2:53
S… Speaker 2 (259. Sending a POST Request)
Now here,
2:55
S… Speaker 2 (259. Sending a POST Request)
since I wanna store data,
2:56
S… Speaker 1 (259. Sending a POST Request)
I'll start with a post request.
2:58
S… Speaker 1 (259. Sending a POST Request)
Now you call this method and it takes a couple of arguments.
3:02
S… Speaker 1 (259. Sending a POST Request)
The first argument is the URL you wanna send this request to,
3:06
S… Speaker 1 (259. Sending a POST Request)
and that is the URL you can find in your Firebase Realtime Database,
3:10
S… Speaker 1 (259. Sending a POST Request)
this URL,
3:11
S… Speaker 1 (259. Sending a POST Request)
or at least this URL is a part of the URL we'll send the request to.
3:15
S… Speaker 1 (259. Sending a POST Request)
So paste that in here,
3:17
S… Speaker 1 (259. Sending a POST Request)
but this is not the entire URL.
3:19
S… Speaker 1 (259. Sending a POST Request)
Now on a custom or on different REST APIs you're
3:23
S… Speaker 1 (259. Sending a POST Request)
communicating with,
3:24
S… Speaker 1 (259. Sending a POST Request)
you would have clearly defined endpoints like slash posts,
3:28
S… Speaker 1 (259. Sending a POST Request)
add or something like this to which you have to send your requests and the official
3:32
S… Speaker 1 (259. Sending a POST Request)
docs of the api you're working with would tell you which api endpoint to
3:36
S… Speaker 1 (259. Sending a POST Request)
send the request to for firebase it's a bit differently you
3:40
S… Speaker 1 (259. Sending a POST Request)
have this starting point url here
3:43
S… Speaker 1 (259. Sending a POST Request)
And then you can add your own segments after that,
3:47
S… Speaker 1 (259. Sending a POST Request)
and this will get replicated as folders in this database,
3:50
S… Speaker 1 (259. Sending a POST Request)
so to say.
3:51
S… Speaker 1 (259. Sending a POST Request)
And this looks like you're directly talking to the database,
3:54
S… Speaker 1 (259. Sending a POST Request)
but keep in mind that Firebase only abstracts this away from you.
3:58
S… Speaker 1 (259. Sending a POST Request)
You are still communicating with a REST API provided by Firebase.
4:02
S… Speaker 1 (259. Sending a POST Request)
They just translate your
4:05
S… Speaker 1 (259. Sending a POST Request)
path you're sending it to,
4:06
S… Speaker 1 (259. Sending a POST Request)
to a folder structure in your database.
4:08
S… Speaker 1 (259. Sending a POST Request)
You're not communicating directly with a database here.
4:11
S… Speaker 1 (259. Sending a POST Request)
And I'm stressing this because it is important to keep in mind that you never
4:16
S… Speaker 1 (259. Sending a POST Request)
communicate directly with a database from inside your Angular app.
4:20
S… Speaker 1 (259. Sending a POST Request)
So let's say here,
4:21
S… Speaker 2 (259. Sending a POST Request)
we wanna have a node,
4:23
S… Speaker 1 (259. Sending a POST Request)
a folder,
4:24
S… Speaker 1 (259. Sending a POST Request)
so to say,
4:24
S… Speaker 1 (259. Sending a POST Request)
named posts.
4:25
S… Speaker 2 (259. Sending a POST Request)
Well,
4:26
S… Speaker 1 (259. Sending a POST Request)
then we would simply add posts as a segment here and important for Firebase,
4:30
S… Speaker 1 (259. Sending a POST Request)
you need to add .json.
4:32
S… Speaker 1 (259. Sending a POST Request)
This simply is a Firebase requirement.
4:34
S… Speaker 1 (259. Sending a POST Request)
It's not an Angular requirement,
4:36
S… Speaker 1 (259. Sending a POST Request)
not a REST API requirement,
4:37
S… Speaker 1 (259. Sending a POST Request)
only a requirement by that Firebase REST API.
4:40
S… Speaker 1 (259. Sending a POST Request)
This now allows us to send a post request to that URL.
4:45
S… Speaker 1 (259. Sending a POST Request)
Now, since it's a post request,
4:47
S… Speaker 1 (259. Sending a POST Request)
it doesn't work just like this.
4:49
S… Speaker 1 (259. Sending a POST Request)
However, a post request also needs a request body.
4:52
S… Speaker 1 (259. Sending a POST Request)
Now this post method here works such that it takes
4:56
S… Speaker 1 (259. Sending a POST Request)
more than one argument.
4:57
S… Speaker 1 (259. Sending a POST Request)
It has at least two required arguments.
5:00
S… Speaker 1 (259. Sending a POST Request)
The second argument being the request body.
5:02
S… Speaker 1 (259. Sending a POST Request)
So we pass one additional argument here and that could be our
5:06
S… Speaker 1 (259. Sending a POST Request)
post data.
5:07
S… Speaker 1 (259. Sending a POST Request)
So the data we wanna store,
5:09
S… Speaker 1 (259. Sending a POST Request)
this data.
5:10
S… Speaker 1 (259. Sending a POST Request)
Now, very important,
5:12
S… Speaker 1 (259. Sending a POST Request)
you normally send JSON data when interacting with
5:16
S… Speaker 1 (259. Sending a POST Request)
a RESTful API.
5:16
S… Speaker 1 (259. Sending a POST Request)
And actually that will happen here as well,
5:19
S… Speaker 1 (259. Sending a POST Request)
but the Angular HTTP client will take our JavaScript object
5:23
S… Speaker 1 (259. Sending a POST Request)
here and automatically convert it to JSON data for us.
5:26
S… Speaker 1 (259. Sending a POST Request)
So it will still send JSON data and we'll see this in a second when we inspect
5:31
S… Speaker 1 (259. Sending a POST Request)
that request in the browser developer tools,
5:33
S… Speaker 1 (259. Sending a POST Request)
but Angular will transform this automatically for
5:37
S… Speaker 1 (259. Sending a POST Request)
us.
5:38
S… Speaker 1 (259. Sending a POST Request)
Now with this,
5:39
S… Speaker 1 (259. Sending a POST Request)
we have a request that should work.
5:41
S… Speaker 1 (259. Sending a POST Request)
It has all the core data it needs,
5:43
S… Speaker 1 (259. Sending a POST Request)
the URL and the request body.
5:45
S… Speaker 1 (259. Sending a POST Request)
And for now we don't need to set any other data.
5:48
S… Speaker 1 (259. Sending a POST Request)
Now let's save this and let's give it a try,
5:50
S… Speaker 1 (259. Sending a POST Request)
shall we?
5:51
S… Speaker 1 (259. Sending a POST Request)
So let's go back to our application,
5:54
S… Speaker 1 (259. Sending a POST Request)
enter some content here and
5:58
S… Speaker 1 (259. Sending a POST Request)
click send post.
5:59
S… Speaker 1 (259. Sending a POST Request)
Did something happen?
6:02
S… Speaker 1 (259. Sending a POST Request)
Let's check Firebase.
6:03
S… Speaker 1 (259. Sending a POST Request)
Well,
6:05
S… Speaker 1 (259. Sending a POST Request)
I don't see any data here and we would see it here.
6:08
S… Speaker 1 (259. Sending a POST Request)
Let's check the network tab.
6:10
S… Speaker 1 (259. Sending a POST Request)
So in the browser developer tools and the Chrome developer tools,
6:13
S… Speaker 1 (259. Sending a POST Request)
go to the network tab here.
6:15
S… Speaker 1 (259. Sending a POST Request)
You see a bunch of network requests actually.
6:17
S… Speaker 1 (259. Sending a POST Request)
These are all the files that are downloaded as part of your Angular application
6:21
S… Speaker 1 (259. Sending a POST Request)
and all the JavaScript files and so on.
6:24
S… Speaker 1 (259. Sending a POST Request)
Let's clear that.
6:25
S… Speaker 1 (259. Sending a POST Request)
Let's simply send another post and we don't see any request
6:29
S… Speaker 1 (259. Sending a POST Request)
here. So somehow this request is not being sent and
6:34
S… Speaker 1 (259. Sending a POST Request)
that happens on purpose.
6:37
S… Speaker 1 (259. Sending a POST Request)
Angular heavily uses observables,
6:39
S… Speaker 1 (259. Sending a POST Request)
as you already learned.
6:40
S… Speaker 1 (259. Sending a POST Request)
And HTTP requests are also managed via observables
6:44
S… Speaker 1 (259. Sending a POST Request)
because they are a perfect scenario or use case for observables.
6:49
S… Speaker 1 (259. Sending a POST Request)
We can wrap them and we can then subscribe to them to get informed about
6:53
S… Speaker 1 (259. Sending a POST Request)
the response and to handle errors and so on.
6:56
S… Speaker 1 (259. Sending a POST Request)
The thing just is,
6:57
S… Speaker 1 (259. Sending a POST Request)
Angular is smart,
6:59
S… Speaker 1 (259. Sending a POST Request)
so to say.
7:00
S… Speaker 1 (259. Sending a POST Request)
If you're not subscribing to that prepared HTTP
7:04
S… Speaker 1 (259. Sending a POST Request)
request, you could say,
7:05
S… Speaker 1 (259. Sending a POST Request)
so to that observable that wraps your HTTP request,
7:08
S… Speaker 1 (259. Sending a POST Request)
if you're not subscribing to it,
7:10
S… Speaker 1 (259. Sending a POST Request)
then Angular and RxJS know that no one's interested
7:14
S… Speaker 1 (259. Sending a POST Request)
in the response,
7:15
S… Speaker 1 (259. Sending a POST Request)
and therefore the request doesn't even get sent,
7:17
S… Speaker 1 (259. Sending a POST Request)
because if no one's interested in the response,
7:19
S… Speaker 1 (259. Sending a POST Request)
then it won't send the request.
7:21
S… Speaker 1 (259. Sending a POST Request)
So PostIndeed will return an observable,
7:25
S… Speaker 1 (259. Sending a POST Request)
as you can also see here.
7:28
S… Speaker 1 (259. Sending a POST Request)
It does not give us the response or anything like that as a return value.
7:32
S… Speaker 1 (259. Sending a POST Request)
It gives us an observable that wraps your request.
7:35
S… Speaker 1 (259. Sending a POST Request)
And to get access to the response,
7:37
S… Speaker 1 (259. Sending a POST Request)
you have to call subscribe here.
7:39
S… Speaker 1 (259. Sending a POST Request)
And this will then be your response data actually.
7:43
S… Speaker 1 (259. Sending a POST Request)
Because Angular,
7:44
S… Speaker 1 (259. Sending a POST Request)
the HTTP client,
7:46
S… Speaker 1 (259. Sending a POST Request)
I should say, will do even more than just giving you the response.
7:49
S… Speaker 1 (259. Sending a POST Request)
It will automatically extract the data attached to the response.
7:53
S… Speaker 1 (259. Sending a POST Request)
so the response body and give you that.
7:56
S… Speaker 1 (259. Sending a POST Request)
Though you also have ways of accessing the full response as you'll learn
8:00
S… Speaker 1 (259. Sending a POST Request)
later.
8:00
S… Speaker 1 (259. Sending a POST Request)
So for now,
8:02
S… Speaker 1 (259. Sending a POST Request)
let's simply console .log that response data to get a feeling for whether
8:06
S… Speaker 1 (259. Sending a POST Request)
that works and what we get here.
8:08
S… Speaker 1 (259. Sending a POST Request)
So let's save this.
8:10
S… Speaker 1 (259. Sending a POST Request)
And now with the subscription set up and with a subscribing here,
8:13
S… Speaker 1 (259. Sending a POST Request)
by the way,
8:14
S… Speaker 1 (259. Sending a POST Request)
you don't need to manage the subscription and unsubscribe because it will complete after
8:18
S… Speaker 1 (259. Sending a POST Request)
being done anyways.
8:19
S… Speaker 1 (259. Sending a POST Request)
And it's an observable provided by Angular for which you never need to manage subscriptions.
8:23
S… Speaker 1 (259. Sending a POST Request)
But that's just a side note.
8:25
S… Speaker 1 (259. Sending a POST Request)
So now let's simply test this.
8:27
S… Speaker 1 (259. Sending a POST Request)
Here,
8:28
S… Speaker 1 (259. Sending a POST Request)
let me clear all network requests again.
8:31
S… Speaker 1 (259. Sending a POST Request)
Well, actually,
8:32
S… Speaker 1 (259. Sending a POST Request)
let's first of all open the console again.
8:34
S… Speaker 1 (259. Sending a POST Request)
And...
8:37
S… Speaker 1 (259. Sending a POST Request)
Let's now try this again.
8:38
S… Speaker 1 (259. Sending a POST Request)
Send a post.
8:39
S… Speaker 1 (259. Sending a POST Request)
And now we get a log here,
8:41
S… Speaker 1 (259. Sending a POST Request)
which looks good.
8:42
S… Speaker 1 (259. Sending a POST Request)
Let's ignore what's in there for now.
8:44
S… Speaker 1 (259. Sending a POST Request)
It's a JavaScript object.
8:45
S… Speaker 1 (259. Sending a POST Request)
We can see that,
8:47
S… Speaker 1 (259. Sending a POST Request)
but it has a name and then some cryptic key here.
8:50
S… Speaker 1 (259. Sending a POST Request)
Let's have a look at the network tab.
8:52
S… Speaker 1 (259. Sending a POST Request)
And there we also see that request now.
8:54
S… Speaker 1 (259. Sending a POST Request)
We actually see two requests even.
8:57
S… Speaker 1 (259. Sending a POST Request)
two requests to the post endpoint.
8:59
S… Speaker 1 (259. Sending a POST Request)
Now,
9:00
S… Speaker 1 (259. Sending a POST Request)
that's just a characteristic of browsers when sending post requests,
9:03
S… Speaker 1 (259. Sending a POST Request)
so not to slash posts,
9:05
S… Speaker 1 (259. Sending a POST Request)
but of type post,
9:06
S… Speaker 1 (259. Sending a POST Request)
then they always send two requests.
9:08
S… Speaker 1 (259. Sending a POST Request)
The first one,
9:09
S… Speaker 1 (259. Sending a POST Request)
if you click on that,
9:10
S… Speaker 1 (259. Sending a POST Request)
is of type options.
9:12
S… Speaker 1 (259. Sending a POST Request)
that's a different HTTP verb that will first of all check whether the post
9:16
S… Speaker 1 (259. Sending a POST Request)
request is allowed to be sent and if that gets a success response it
9:21
S… Speaker 1 (259. Sending a POST Request)
will send the actual request which is this one and there you see that was
9:25
S… Speaker 1 (259. Sending a POST Request)
of type post this was the url it sent it to it
9:29
S… Speaker 1 (259. Sending a POST Request)
succeeded these are the response headers we got back by firebase
9:34
S… Speaker 1 (259. Sending a POST Request)
and these are the request headers we sent and for example this one and
9:38
S… Speaker 1 (259. Sending a POST Request)
the content type headers were added automatically
9:41
S… Speaker 1 (259. Sending a POST Request)
to the request sent for you by Angular.
9:44
S… Speaker 1 (259. Sending a POST Request)
You didn't add these headers,
9:46
S… Speaker 1 (259. Sending a POST Request)
they were added by Angular.
9:48
S… Speaker 1 (259. Sending a POST Request)
And here in the request payload,
9:50
S… Speaker 1 (259. Sending a POST Request)
you also see that JSON data that was attached for you.
9:54
S… Speaker 1 (259. Sending a POST Request)
You can also of course see the response here,
9:56
S… Speaker 1 (259. Sending a POST Request)
which is the response we log to the console.
9:58
S… Speaker 1 (259. Sending a POST Request)
So this is how we send HTTP requests.
10:01
S… Speaker 1 (259. Sending a POST Request)
And besides the general syntax,
10:04
S… Speaker 1 (259. Sending a POST Request)
the core takeaway is that requests are only sent when you subscribe.

Selle transkripti tekitas AI (kõne automaatset äratundmist). Võib sisaldada vigu ® kontrollida originaalheli kriitiliseks kasutamiseks. AI poliitika

❤️ Meeldib STT.ai? Räägi sõpradele!
Kokkuvõte
Klõpsa selle ärakirja AI kokkuvõtte genereerimiseks kokkuvõtvalt.
Kokkuvõtvalt...
Küsi AI selle transkripti kohta
Küsige selle ärakirja kohta midagi, AI leiab asjakohased lõigud ja vastab.
Transheeri teine