Vue.js axios http GET Request Example Tutorial

Vue axios get request example; In this tutorial we will share you how to use axios http get request in Vue.js. We have share more then example of axios get reuqest, with error handling, with async/await and set http headers. A GET request can be made with Axios to “get” data from a server.

The HTTP get request is performed by calling axios.get(). The easiest way to make a GET request with Axios is the axios.get() function. Lets see the easy and best examples of axios get request in vue without or with parameters.

• axios POST Request Examples in Vuejs

Install axios from npm

First install the axios from npm package running the following command.

npm install axios

Axios is a promise-based library. However, we can use async/await to wait for the response from the server.

1. Simple axios GET request

Below we call the getProducts methods from created and then the response come we set the response in products variables.

methods: {
    getProducts() {
        this.axios.get('http://127.0.0.1:8000/api/products')
            .then(response => {
              this.products = response.data;
        });
    },
}

2. axios GET request with error handling

Error handlings means show errors when errors comes from backend, So we need to display then in frontend for the users. Here the example for showing errors using axios get request.

methods: {
    async getProducts() {
        axios.get('http://127.0.0.1:8000/api/products')
            .then(response => {
              this.products = response.data;
            }).catch(error => {
                console.log(error.response.data);
        });
    },
}

3. axios GET request with async/await

async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above). Lets see how to use the async and await methods in vue.

methods: {
    async getProducts() {
        await axios.get('http://127.0.0.1:8000/api/products')
            .then(response => {
              this.products = response.data;
            }).catch(error => {
                console.log(error.response.data);
        });
    },
}

4. axios GET request with set HTTP headers

This sends the same GET request again from Vue using axios with the HTTP Content-Type header set to application/json.

methods: {
    getProducts() {
        const headers = { "Content-Type": "application/json" };
        axios.get('http://127.0.0.1:8000/api/products', { headers })
            .then(response => {
              this.products = response.data;
            }).catch(error => {
                console.log(error.response.data);
        });
    },
}

Vue axios request full Example

<template>
  <div class="card">
    <h5 class="card-header">Simple GET Request</h5>
    <div class="card-body">Products Listing Here: {{products}}</div>
  </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                products: {}
            };
        },
        created() {
            this.getProducts();
        },
        methods: {
            getProducts() {
                axios.get('http://127.0.0.1:8000/api/products')
                    .then(response => {
                      this.products = response.data;
                    }).catch(error => {
                        console.log(error.response.data);
                });
            },
        }
    };
</script>

I hope you enjoy with axios get request in vue js example.