Axios Requests In VueJs

Knowing how to do Fetch API is good but knowing how to use Axios Requests is even better. This article is about that.

If you are already in web development and you have already at least a little bit of experience, you would probably have heard of Axios.

Axios is a promise-based HTTP Client and it is something that can really make our lives easier while sending requests from the front-end to the back-end.

In this article, we will see how to use it with the most realistic examples.

Installation

First of all, like for any other project you have already done all the necessary installations for VueJs and now you are ready to import Axios.

npm install --save axios vue-axios

After you have installed Axios in your local environment, you have to import it into your project.

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

Now your Axios is installed globally and you can use it anywhere in the project. 👍

👉 GET

Let’s see how we can create a GET request using Axios.

export default {
data() {
 return {
  items: []
}
}
created() {
 getItems() {
      this.axios.get(fakeapi.com/items).then((response) => {
        this.items = response.data;
      })
}}

In the example above we used Axios for the first time to call a get request and to get an array of items.

As we want just to display our items we called it in created(), so it will be rendered with the component.

To be able to “save” our items, we have created an empty items array in our data and assigned it to the data that we receive from the server.

👉 POST

Post is used to send the new data or to update existing data.

For example, if we want to add a new item to the list or edit an item that is already presented in our list.

methods: {
postItem(item) {
this.axios.post('fakeapi.com/items', item)   
.then(function (response) {  
   this.items.push(item);  
})   
.catch(function (error) {    
 console.log(error);  
 });
}
}

We can see that in the example we send the data about our item in a “postItem()” method. The first argument for Axios will the URL and the second one is actually the data that we want to send.

When the response is OK, we can add the item to our array of objects in order to see the result of our request immediately after the action.

Usually, the data (in our case “item”) is an object that consists of different elements like first name, last name and are taken from the v-model of inputs.

For example:

<input type="text" v-model="item.firstName">
export default {
   data() {
     return {
       item: {
         firstName: ''
       }
     }
   }
}

Anything we type in this input will be sent to the backend when submit.

👉 DELETE

I think this request is clear about its main function. Let’s see the example of its usage with Axios.

this.axios.delete(`fakeapi.com/items/${item.id}`)
     .then(function (response) {  
       const findItem = this.items.findIndex((c) => 
       c.id === item.id);
       this.items.splice(findItem, 1);
})   
     .catch(function (error) {    
      console.log(error);  
     });
}
})

To be able to delete an item we have to take its id and set it after our URL unless there are any other conditions required for this request.

After a successful request response, you can remove this item from the list of items by finding its id in our items’ array and splicing it from this array.

Those were the main Axios requests that personally I use almost every day and that are also important to know and to master.

Hope this article was useful. Thank you 😊