- [Instructor] In this video, we're going to make
our 1st API call
to populate the message list with real data,
and introduce lifecycle hooks.
When this component loads,
we want to retrieve status messages from the API,
instead of showing the static data
over here in the message list.
We need to be a little careful about when that happens.
That the component is actually ready to display the data,
before we try to do that.
Just like jQuery's ready function,
or the DOMContentLoaded event in Vanilla JavaScript,
you want to make sure that your target
is ready before you try to use it.
In View, there are special methods called lifecycle hooks,
that let you do things at various times
during the lifespan of a component.
In our case, we're going to use one called Created,
which, as you might guess, is a relatively early one,
but a good place to load data.
Switching back to my editor,
here in hotel.js,
I'm going to scroll down to the main view component.
And I'm going to empty out all of these static items.
So messages is going to be initialized as a blank array.
And now I need a helper function
that's going to actually do the loading.
So I'll add a methods key,
and we'll have a function called retrieveStatusMessages.
This is going to tie into Axios,
that library that we installed
for handling network requests.
The method that we want to use inside Axios is get.
What we're going to get is CONFIG.apiUrl
/get.php.
Just like we saw before.
This is promise-based,
so we're going to chain onto this a then callback,
which looks like this.
Passed into this callback function is a response.
And inside that response we can set our messages
to the data that comes back with the response.
So this is response.data.
And to make sure that the this keyword
inside this callback function refers to the same thing
as this inside the methods,
we're going to bind this to the callback function.
And then, finally, we can catch
any errors that might be coming through.
So the parameter here could be some error,
and we can just log a console message.
We can say, "retrieveStatusMessages failed."
And we'll render that error to a string.
There we go.
Save that, and Prettier made it all work.
So now I have my helper function
that will do the retrieving of the status messages,
but it's not going to be called anywhere yet.
To do that, I'm going to use my lifecycle hook.
Lifecycle hooks are added
as additional keys in your components,
or in this case, our view instance.
We want to hook into one that's called Created.
This is just a function.
And so when my instance is at the Created step,
I'm going to call retrieveStatusMessages.
And that's it.
You can refer to the View Docks to see the full lifecycle
for any given component.
There are hooks for when a component is updated,
for when it mounts and unmounts, and so forth.
Created is a good one for data retrieval like this.
All right, let's switch to the browser and reload this.
Great, the messages are loading, so we are in business.
We've added a method to retrieve the messages,
called it from a lifecycle hook,
so it happens automatically
when the component is ready, and not before.