259. Sending a POST Request

Jul 21, 2026 06:00 · 10:11 · English · Whisper Turbo · 2 Skaļruņi
Šī transkripta derīguma termiņš beidzas 7 dienas. Atjaunināt pastāvīgai uzglabāšanai →
Lekcija indekss
Rādīt tikai
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.

Šis transkripts tika ģenerēts ar AI (automātiskā runas atpazīšana). Var saturēt kļūdas — pārbaudīt pret oriģinālo audio kritiskai lietošanai. AI politika

❤️ Patīk STT.ai? Pastāsti draugiem!
Kopsavilkums
Noklikšķiniet uz Summarize, lai ģenerētu AI šī transkripta kopsavilkumu.
Apkopojot...
Vaicāt AI par šo transkripciju
Jautāt kaut ko par šo stenogrammu — AI atradīs attiecīgās sadaļas un atbildēs.
Atzīmēt citu