- [Instructor] The fetch hook on the other hand
can be used in any component.
And it is called during server side rendering,
right after the component instance is created.
With the fetch hook,
you have access to the component instance.
Let's see another example using the fetch hook.
Here in the index dot view file
where we made the previous async data example,
we will just stick that out and instead
create a new async function called fetch.
Now, here we don't actually need to pass in HTTP
because we can access it from the component instance.
So here I would call const response equals await.
So now I would say this dot HTTP dot get
and in here passing the URL for our endpoint.
Now, before actually returning the response,
one thing I would like to call out is that
with the fetch hook, you actually
need to merge the returned data to
the data property or the component local state.
Remember in asyncdata you did not have to do this
only returning the data with methods, but here you have to.
So let's create a data property
and our return, an object,
and now call the rivers array here.
Now we want to set it as empty.
And the response we get back would automatically merge it
to the rivers that we created.
So I will call the rivers by passing in this dot rivers
equals to response, right?
Now with this, we initially
had an empty array but now we are
taking the response from this and passing it
into the empty array.
So if we go back to the browser, we won't actually
see any difference because it doesn't like show you that
oh, something changed.
But if I inspect this page and check the index page
you still see that you actually have the same rivers array.
If I remove this here and just return response,
and go back here, you'd now see that the array is empty.
So what I did here was just, hey, I'm taking the response
that I'm getting, I'm putting it into
the river arrays, right?
The fetch hook also exposes the fetch state object
at the component level.
To check if the request has finished
and progressed successfully.
The fetch state object looks like this
and it includes three different keys.
The first key here is the pending key.
This displays a place holder when the fetch
is being called on the client side.
Next, we have the arrow key
and this is what at least shows you an error message.
Finally, we have the timestamp and this shows the timestamp
of the last fetch, which is useful for caching.
So which ones should you use and when?
Well, seeing that a fetch and asyncdata hook
are very similar and they both deal with local data,
here's how you can tell which one to adopt
for your use case.
First asyncdata is only available on page components
while fetch, you can use it on all your vue components.
The component instance of this is unavailable
in asyncdata while it is available in fetch.
And finally, with asyncdata, the data needs to be returned,
and in fetch the local data presence is mutated.
It's very important to understand the differences
between both data fetching methods so
that you can properly utilize them when fetching data
in your Nuxt application.