- [Instructor] Since the Fetch API
isn't compatible with older browsers,
a lot of people,
especially in the View community,
use a different API called Axios.
Now, it does what Fetch does,
but it's more compatible
with older browsers like Internet Explorer.
Now the syntax is a little bit different
and we are going to need to install it
into our application,
but let's take a look at some
of the options that it gives you.
Now the first thing you'll notice
is that there is a shortcut that allows you
to do different types of requests,
so we can do a Get Request by saying axios.get,
and then the URL, and then we'll receive
a response and we could just output the response,
and this is a little bit different than Fetch
because we don't have to translate the response to JSON.
It assumes that you're going to want JSON.
If you look at the features right here,
you can see that it automatically transforms
for JSON data, which is great.
Now if you look right here,
you'll notice also that it has a traditional way
of specifying any method,
so we can say axios and then
open a parentheses without the .get or .post
and then specify our method manually here,
then a URL and this is sort of cool too,
you can pass along an object as data,
and it will get passed along with your request.
So if we wanted to add a song to our list,
you could send a post request
and hopefully you would have
a rest API or some sort of code
that understands this request
and is able to receive the data,
so passing along information is a lot easier.
Now you can see here all the aliases that you could use,
so get, delete, the traditional verbs
that you can use with html are right there.
So let's take a look at how we can
incorporate this into our application.
Let's switch back over here,
and as I mentioned
we're going to need to install this Axios
by doing an NPM install,
I'll do a save so that is gets saved as a dependency,
and we'll type in Axios.
Right, once it's installed,
let's go ahead and clear this out,
and close this,
we can rewrite this created method
so that it used Axios
instead of the Fetch API,
so let's just go ahead and leave
the Fetch API there so that we can
take a look at the difference,
and we'll start off by doing
Axios as the call here,
and actually before we do that
wen need to make sure that
we import it as a dependency of this component,
so let's scroll back up and say
import Axios from Axios.
And now we can make this call right here,
so what we can do is either use
one of the verbs like get or post
and there are shortcuts for all of them,
or we could just pass along an object,
like we do with the Fetch API,
so we can specify here the method,
and say that we're going to use get,
and then we can also specify a URL
and link to the location of our data file.
And if you wanted to,
say if this was a post method,
you can pass along a data object
and perhaps here you would pass along information
like song name, and whatever you wanted here, right,
and then you can use the regular promise based methods,
so you could say something like then,
get the response, and then do something
with that response.
Right so notice that it's less complex
than using the Fetch API,
we don't have to do this translation
to a JSON document,
and then when we get the response here
we need to point to a different object
because the response will have
all of the information that you
would normally get in this return
that you see right here,
that we translate to JSON,
and so you kind of have a variable
called response it's a combination
of the response and the data together
that doesn't need to be translated
so we just have to point to this specific object
to get the information.
So let's go ahead and delete this one.
And we'll save this, this should still work,
clearly we don't need to pass along this data,
so we can definitely get rid of that
if it's not a post method,
I'm just showing you that you can use
this sort of, you know, structure
to pass along any type of information
in any specific method,
but there are shortcuts that you can use as well,
so traditionally when you get something
all you do is say Axios.get
and then in here you pass along the URL
data.JSON and then you get the response
and assign it to a local variable,
works just like it did before,
so this is all you need to do.
Let's go ahead we can put this on the next line,
just to make it a little clearer,
actually my out of formatter wants to put it up there
so that'll be fine.
And if you wanted to catch for errors
then you could do something like this,
catch error, and then we'll just pass this
along to the console.
And this will work as well.
So now it decided to put it on multiple lines,
it still works, it still gets the data in the same way,
the Axios library is very convenient
and easy to use,
I think it's a little bit easier that the Fetch API
and you can see that it gives you
just a lot of flexibility
to be able to push along
any kind of request that you have for your project.