- One of the things that we installed is called axios,
which is a promise based HTTP client,
and what it does really well is provide
a very compatible way of performing AJAX calls,
which is why it's so popular in the vue JS community.
And so although you could use something like the
fetch API in java script, this is going to be a little more
compatible so I'm going to show you how to use it here.
And to do that let's take all these appointments
and I'll just cut them out of here
and I'll create an empty array for appointments.
And then I'm going to go into my public folder,
make a new folder called data, and then make a file.
I'll call this appointments.json
and I'm going to paste all that in there.
Go ahead and save that, and then in here
I'll go ahead and import axios from the axios library.
And then I need to go ahead and read these
into my application, and to do that I'm going to use
another part of the object, and this is going to be mounted.
So vue JS, much like other frameworks,
provides a set of lifecycle hooks.
These are ways to tie into things that
are happening within the application.
So for example we have this mounted event
that takes place when the application is being mounted.
That means almost like starting,
and that is a great place to load files or load data into.
There are other lifecycle methods,
and you can check the documentation
on vue to find out what those are, but the one
that is really useful to us right now is mounted.
So what we'll do here is call the axios library
and use the get method and then locate that data folder
appointments.json and then we can do a promise
and we'll receive a response from the promise
and based on that response we will set the value
of the appointments variable to our response data.
So the response that you get is an HTTP like response
that just has all kinds of information,
the one that we are going to use is
the data property of that response,
which will work pretty well, and axios is just going to
sort of make the process of getting the data a lot easier.
If you've ever done AJAX request,
you should be able to see how easy this is.
Now the fetch API is also pretty easy
and it is also promise based, but again axios
makes it a little more compatible with older browsers.
So let's take a look at our application,
and you can see that nothing is coming up right now.
Now the reason that's happening is because
when we look at appointments.json,
this is actually a java script object,
it's not a valid json file and that's because
these should be double quoted.
So because I have this really nice editor,
it's actually letting me know what the problem is.
Also some of the lenting software is
actually taking care of this sort of thing.
So I need to make sure this is a valid json object
instead of a java script object,
so and that means just adding quotes
to the beginning parts of all of this parameters here.
So once we save all these you should be able
to see all of the appointments show back up.
So that's how you use axios, there's clearly
a lot more to it, you can take a look
at the documentation in axios.
And just remember that this happens to be a common
vue JS library that you can use whenever
you need to use things like AJAX and have a
promise based more compatible version of the fetch API.