In this rather short post, I am going to walk through on how to consume APIs using Axios for your VueJS application. The first thing we are going to do is to set up Axios and VueJS and in this case I am going to use codepen.
Setting up CodePen
The first thing that you have to do is import the VueJS library as well as Axios from the settings tab.
For the api that we are going to consume, we are going to use JsonPlaceholder and they will provide dummy api that we can make use of.
Initialize VueJS on Codepen
To start, I will initialize the base of the application and apply some styling. You can check the screenshot below.
Once you have written the code, then let’s continue to define the methods to retrieve the api. To do that we can call the axios directly as we have require it on the settings tab. We will call the axios method when the application is on a mount state which mean everyhing have been processed and ready to be mounted.
For the api endpoints, it will looks like this.
in this case, we will request to the posts endpints. To request it we will use the get method that’s provided on axios. To see what the endpoints on your browser, visit this page jsonplaceholder posts json.
As you can see here, we have define the mounted method and we call the getPosts method to ensure the mounted method is not bloated. Once we retrieve the posts endpoint then we pass it to the res parameter where we will log the data to the console.
Upon opening the console we will see all of the 100 posts that we have just requested. Now let’s create a new data variable for our vuejs apps to hold the array. What you need to is is to add this
Once you have done that then we will save the posts to the array by declare it like below.
axios.get('https://jsonplaceholder.typicode.com/posts') .then(res => this.posts = res.data);
What we have to do now is loop through it and we will see our page get updated with all of the post that we have just retrieved.
More Http methods
There are more http methods that axios has provide for us to use such as post, put, patch, delete and other. You can read the documentation Axios Docs. Other alternative you can use fetch that’s provided by the browser itself and it looks like the following.
I also have link the example from the codepen below if you want to check them out.
Writing an app to consume APIs using Axios for your VueJS application is not that difficult. What you have to do is just understand the api that have been provided and you can now build an application that make use of 3rd party API easily.
Thank you for your time and I hope the tutorials help you. Keep exploring and happy coding.