DEV Community

Luca
Luca

Posted on

8 3

Vue Axios Use Axios API with Vue CLI

Hi guys, this is a small tutorial for use Axios to call API with Vue CLI.

First step install Axios with command:

npm install --save axios vue-axios
Enter fullscreen mode Exit fullscreen mode

Second step entry file into your main.js file:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
Enter fullscreen mode Exit fullscreen mode

After this, you only need your API link, Axios, and methods you want to call.

You have 2 ways for call axios on your file Vue:

You can use Axios with import on your file Vue like this:

<script>

import axios from 'axios';

//Use **mounted** if you want to print it on the screen.
mounted() {
   AXIOS CALL
}

//Use **methods** if you have @click function.
methods(){
   click() {
    AXIOS CALL
   }
}

</script>
Enter fullscreen mode Exit fullscreen mode

Or simply add this before your Axios call like this:

<script>

this.axios.get()....

</script>
Enter fullscreen mode Exit fullscreen mode

Now you can call your requests:

GET

(All)

axios.get("Api link" , {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
        })
        .then(response => {
            this.datas = response.data
            console.log(response.data);
        })
       .catch(function (error) {
             console.log(error);
        });
Enter fullscreen mode Exit fullscreen mode

GET

(Select by id one of this to show)

axios.get("Api link" , + id {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
        })
        .then(response => {
            this.datas = response.data
            console.log(response.data);
        })
          .catch(function (error) {
             console.log(error);
        });
Enter fullscreen mode Exit fullscreen mode

POST

(You need id and new formData for create new data; you take this from an input with specify v-model for your data)

var formData = new FormData()
formData.append('Your_database_column', this.Your_new_input_v-model)
axios.post("Api link", formData, {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
            })
            .then(function(response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        },
    }
Enter fullscreen mode Exit fullscreen mode

PUT

(You need id and a formData for change the old value; you take this from an input with specify v-model for your edit data)

var formData = {
             role: this.Your_edit_input_v-model,
}
axios.put("Api link" , + id, formData, {
            headers: {
            'Authorization': 'Bearer' + 'Your Bearer Pssword',
            "Content-Type": "application/json",
            }
        })
        .then(response => {
             console.log(response.data);
        })
        .catch(function (error) {
              console.log(error); 
        });
Enter fullscreen mode Exit fullscreen mode

DELETE

(You need the id for delete a data)

axios.delete("Api Link" + id, {
           headers: {
           'Authorization': 'Bearer '+ 'Your Bearer Pssword',
           "Content-Type": "application/json",
           }
           })
           .then(function(response){
           console.log(response.data);
           })
          .catch(function (error) {
           console.log(error); 
          });
       }
Enter fullscreen mode Exit fullscreen mode

Thanks for reading my first #dev post!

Top comments (1)

Collapse
 
codemicky profile image
codemicky

This blog is about VueAxios but you used only Axios.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more