In this lesson, let's take a look at a random assortment of utility functions provided by Vue use, starting with useFetch. useFetch is a handy way of making Ajax requests. Let's make a request to the JSON placeholder dummy API to see what's possible. Okay.
First, I'll call the useFetch function and pass it the URL. Then, from the return of useFetch, we can destructure an isFetching boolean, the data from the response. and an error, with those pieces of data now available. In the template, we can render an error message if the request fails.
And we can also display a loading indicator while the request is fetching. I'll give it a blue color just so it's easy to point out. Finally, when the data is loaded, we can display it. On the right-hand side, in our application preview, our data is now displaying.
And if I give the page a refresh in order to start the AJAX request over again, you should be able to see the loading indicator pop up briefly before the data. Awesome. That's exactly what happens. We saw the loading indicator flash for just a moment and then our data shows.
As for the error, oftentimes this will be out of the control of our frontend application. Maybe the server goes down or some bad code gets pushed to the backend. So... To simulate an error and force a bad response from a request, let's make a typo in our URL.
Immediately we get the error message. Great. I'll just change it back now. All right.
Another cool thing that we can do with useFetch is provide the refetch option. This means that if we change the URL to something reactive, like a reactive ref or a computed prop, then the request will be automatically rerun whenever that URL changes. Sounds pretty cool, right? Okay, well, let's give it a try.
This URL is for fetching a post by its ID. So let's actually make the ID part dynamic. First, I'll create a reactive ref called ID. Then I'll turn URL into a computed prop and use the dynamic ID at the end.
Lastly, I'll bind the ID to a number input. That way we can trigger a change in the URL. Now, over on the right hand side, if I give the app a refresh, we get the post loaded with the ID of 1. Next, if I update the ID in the input, then the data is automatically refetched.
Notice that the ID in the returned data is now 12. Plus, if you were paying really close attention, you might have noticed that our loading indicator flashed for a moment as well. Okay, that was a pretty simple way of fetching data from an API, and done in a reactive manner. I could see this being super useful for something like pagination or filtering, where the user can adjust some controls which update the query string on the URL.
If you'd like to know more about how UseFetch works, then you can check out the ViewUse docs. There are several other things that it can do that we just haven't had time to cover in this lesson. All right. Another handy utility function from Vue use is the reactify function.
Reactify can convert a normal procedural function that accepts and returns non-reactive data into a function that accepts and returns reactive data. For instance, The popular utility library Lodash has a camelCase function that will make a string camelCase. I've already installed Lodash in this StackBlitz project, so we can import the function like this. Now, let's say that we want to define a string as a reactive ref.
But then, we also want a camelCase version of the string to be automatically computed whenever string changes. Well, we could create a computed prop like this, but... Perhaps we want to have reactive camel case versions of strings fairly regularly throughout our application. Instead of manually doing this with computed, we could just make a reactive version of Lodash's camel case function.
That's where the reactify function comes in. All right, just like that we have a reactive version of the function and I prepended it with the letter r just to indicate such. Now all we need to do is call the new function on our string reactive ref, and the result will be the exact same thing as the computed property we had a moment ago. To confirm it works, let's provide an input in the template to modify string and print out the camel case string underneath.
Hmm, it looks like there's an issue. Let's inspect the console and see what we get. Okay, ref is not defined. I just forgot to import that in the boilerplate code.
So let's go ahead and do that. All right, let's give it a shot. Perfect. When I typed into the input, the camel case version of the string updated as well.
To me, this is absolutely amazing. Not because of this particular use case being all that useful, but because we can apply this same principle to absolutely any procedural function out there. Whether it's one we write ourselves, or one we import from a library like Lodash. Furthermore, we could store these reactified versions of functions in a file of their own, and then reuse them throughout the entire codebase.
If we wanted to, we could even create a reactive version of the entire Lodash library, or perhaps any other library that you'd like to make reactive as well. In this lesson, let's take a look at a random assortment of utility functions provided by Vue use, starting with useFetch. useFetch is a handy way of making Ajax requests. Let's make a request to the JSON placeholder dummy API to see what's possible.
Okay. First, I'll call the useFetch function and pass it the URL. Then, from the return of useFetch, we can destructure an isFetching boolean, the data from the response. and an error, with those pieces of data now available.
In the template, we can render an error message if the request fails. And we can also display a loading indicator while the request is fetching. I'll give it a blue color just so it's easy to point out. Finally, when the data is loaded, we can display it.
On the right-hand side, in our application preview, our data is now displaying. And if I give the page a refresh in order to start the AJAX request over again, you should be able to see the loading indicator pop up briefly before the data. Awesome. That's exactly what happens.
We saw the loading indicator flash for just a moment and then our data shows. As for the error, oftentimes this will be out of the control of our frontend application. Maybe the server goes down or some bad code gets pushed to the backend. So...
To simulate an error and force a bad response from a request, let's make a typo in our URL. Immediately we get the error message. Great. I'll just change it back now.
All right. Another cool thing that we can do with useFetch is provide the refetch option. This means that if we change the URL to something reactive, like a reactive ref or a computed prop, then the request will be automatically rerun whenever that URL changes. Sounds pretty cool, right?
Okay, well, let's give it a try. This URL is for fetching a post by its ID. So let's actually make the ID part dynamic. First, I'll create a reactive ref called ID.
Then I'll turn URL into a computed prop and use the dynamic ID at the end. Lastly, I'll bind the ID to a number input. That way we can trigger a change in the URL. Now, over on the right hand side, if I give the app a refresh, we get the post loaded with the ID of 1.
Next, if I update the ID in the input, then the data is automatically refetched. Notice that the ID in the returned data is now 12. Plus, if you were paying really close attention, you might have noticed that our loading indicator flashed for a moment as well. Okay, that was a pretty simple way of fetching data from an API, and done in a reactive manner.
I could see this being super useful for something like pagination or filtering, where the user can adjust some controls which update the query string on the URL. If you'd like to know more about how UseFetch works, then you can check out the ViewUse docs. There are several other things that it can do that we just haven't had time to cover in this lesson. All right.
Another handy utility function from Vue use is the reactify function. Reactify can convert a normal procedural function that accepts and returns non-reactive data into a function that accepts and returns reactive data. For instance, The popular utility library Lodash has a camelCase function that will make a string camelCase. I've already installed Lodash in this StackBlitz project, so we can import the function like this.
Now, let's say that we want to define a string as a reactive ref. But then, we also want a camelCase version of the string to be automatically computed whenever string changes. Well, we could create a computed prop like this, but... Perhaps we want to have reactive camel case versions of strings fairly regularly throughout our application.
Instead of manually doing this with computed, we could just make a reactive version of Lodash's camel case function. That's where the reactify function comes in. All right, just like that we have a reactive version of the function and I prepended it with the letter r just to indicate such. Now all we need to do is call the new function on our string reactive ref, and the result will be the exact same thing as the computed property we had a moment ago.
To confirm it works, let's provide an input in the template to modify string and print out the camel case string underneath. Hmm, it looks like there's an issue. Let's inspect the console and see what we get. Okay, ref is not defined.
I just forgot to import that in the boilerplate code. So let's go ahead and do that. All right, let's give it a shot. Perfect.
When I typed into the input, the camel case version of the string updated as well. To me, this is absolutely amazing. Not because of this particular use case being all that useful, but because we can apply this same principle to absolutely any procedural function out there. Whether it's one we write ourselves, or one we import from a library like Lodash.
Furthermore, we could store these reactified versions of functions in a file of their own, and then reuse them throughout the entire codebase. If we wanted to, we could even create a reactive version of the entire Lodash library, or perhaps any other library that you'd like to make reactive as well.