Understanding a tutorial: Using axios.get()
I'm following a tutorial that uses Express JS to create a server and integrates it with some 'static' resources (html, css, js).. showing how app.get(), app.post() work with a form etc (pic 1 & 2)
There are 2 'versions' of the form that the tutorial goes over. One of them, (the index.html), links the form to the server, in app.js, with a method = POST. (pic 3)
There, we're using a require() to get a people array out of a local file (data.js), and in our app.post using that info to test against the user's form input. (pic 1)
The second version of the form (in javascript.html), links the form to javascript (same-page script tags). This is the one I'm confused about.
Here, he uses an axios library and axios.get().. in order to somehow also grab that same people array from the same local data.js file, and then display all of the 'people' array names on the page, in a div container called "result".
The part I don't understand is the const { data } = await axios.get('/api/people')
"/api/people", in the app.js, was the URL we'd set to display already gotten data (the "people" array).
But here, in this javascript, at no point yet have we 'already gotten' that people array data.
I can't tell what the axios.get(), const { data } = await axios.get('/api/people') , is doing. Is it going to the app.js-setup URL in order to retrieve the 'people' data (as opposed to getting it from the local folder itself)?
14 Replies
axios.get is performing an HTTP GET request to /api/people and returning the result after some parsing
it's doing the same thing
fetch
would do, but it's a library with potentially some extra features, which also predates fetch
especially in nodejs which only got native fetch
support recentlyso like with the app.js 'get' request.. we had to source the data to be responded with (the 'people' array) we had to actually first require() the doc housing that info, and then we included it as the response to the get request...
But in the axios.get().. how is it getting and returning that 'people' array info?... Its assigned to a const = {data}, and of course the local file is data.js.. but where does this 'getting people array' happen?
axios.get
is the method that does HTTP requests, so it's like typing <yourdomain>/api/people in your browser. That probably produces a bunch of JSON data, from where you defined that endpoint. Axios returns some kind of object that contains a data
property, which is assigned to the newly defined data
(const {data}
is called destructuring syntax, and will take whatever is to the right of the assignment operator and take the data
property from that and assign it to a const called data
in the local scope)
There's nothing clever happening, it's literally just doing an HTTP request and whatever is on the other side of that request is responding with the data based on how it's set up. Axios is not going to read your code or figure out any shortcuts or whateverokay so it's destructuring information that is a*already stored *at /api/people... meaning that information has to already be at that URL, right? So doesn't that imply that we didn't set up the response? since the data already there at that URL?
it doesn't seem like we're controlling the get request's response here
I'm not sure what you mean. You could fill any endpoint of any api in that
axios.get
and it would fetch data from there. It's irrelevant that it's accessing the same application its in
the app.get
call is what's setting up the endpoint you're accessing, and it's sending whatever is in people
(which is the data from ./data
) back whenever someone accesses it
destructuring is just syntax shorthand, you could rewrite
as
or
I get destructuring..
Let me try an analogy
The get request is an empty box.
In app.js... we declare what the person has to say in order to receive what's in the box (the URL).. AND we have to get the thing to put in the box, the thing to respond with, so that when the person says the thing (provides the URL), we have already gotten the thing to give to them.
We have to do both parts.. specify the URL, AND also procure the thing to be responded with (the 'data')
In the axios JS, there is no part where I've gotten the thing (data) to be responded with.
I've specified what the person must say in order to get what's in the box... (specified the URL).. but I have not actually gotten the thing that has to be in the box at the time that it's requested..
the app.js gets that info with the require()
actually goes and gets that file and destructures it, and so it has the thing to respond to the GET request with
in axios, we're just specifying the URL.. and magically getting information?
or is axios.get getting the information that's already been put at that URL by app.js?
this is where you've gotten the data to be responded with
the "magic" is that it does an HTTP request that gets handled by app.js, so not really magic at all
oh okay so axios.get() is not "setting up" the GET request - how it should be responded to etc - "how a GET request should be responded to" is still be controlled by app.js, not by the axios.get()
axios.get() is just saying "make a get request to the app.js server"
if i didn't have the app.get() set up already, then the axios.get() would not work
correct
app.get is defining the route, axios.get is accessing the route
axios is just fancy
fetch
gotcha gotcha ok
much appreciated as always sorry for the confusion
glad to help 🙂
so I'm now doing the axios.post() from a form submit (click event listener in JS).
This is the javascript.
And then from app.js, I listen for an POST request from '/api/people', which I assume receives {name: nameValue} as its req.body
In the tutorial, at this point, he's able to look in the network tab 'headers' section and see the POST request.
However, when I submit the form, I'm not seeing the request come in on my network headers tab
any errors in the console?