Axios POST Request Examples in Vue Js

Vue js post form data using Axios Request Example; In this tutorial you will learn axios http post request example with Vue.js. We have share more then examples with different requirements just liek simple axios post reuqest, with error handling, with async/await and set http headers.

A POST request can be made using Axios to “post” data to an endpoint. This endpoint may then use this POST request to perform a certain task or trigger an event. The HTTP post request is performed by calling axios.post(). Let’s see how to use axios post form data request example in Vue Js.

• Vue axios http GET Request Examples

1. Install axios from npm

Using axios post request we need to install the axios from npm package first using running the following command:

npm install axios

This method requires two parameters. First, it needs the URI of the service endpoint. Second, an object which contains the properties that we want to send to our server should be passed to it.

2. axios POST request with a JSON body

This examle send an HTTP POST request to the Reqres api that responds with created post in backend. We send these type posts like name, description,price etc from frontend and the product will created in backend and the backend send the json response to frontend.

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                product: {}
            }
        },
        methods: {
            createProduct() {
                axios.post('http://127.0.0.1:8000/api/products', this.product)
                    .then(response => {
                        this.product = response.data;
                    });
            }
        }
    }
</script>

3. POST request using axios with async/await

This example work same but async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                product: {}
            }
        },
        methods: {
            async  createProduct() {
                await axios.post('http://127.0.0.1:8000/api/products', this.product)
                    .then(response => {
                        this.product = response.data;
                    });
            }
        }
    }
</script>

4. Vue axios POST request with error handling

Whenever we get error from backend then error handling is most impotant for showing the error message for user. We can show this error in console.log().

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                product: {}
            }
        },
        methods: {
            createProduct() {
                axios.post('http://127.0.0.1:8000/api/products', this.product)
                    .then(response => {
                        this.product = response.data;
                    })
                    .catch(error => {
                        console.log(error.response.data);
                    });
            }
        }
    }
</script>

5. axios POST request with set HTTP headers

We can set the HTTP header in our post request just like below,the HTTP header work on Authorization header and a custom header My-Custom-Header.

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                product: {}
            }
        },
        methods: {
            createProduct() {
                const headers = { 
                  "Authorization": "Bearer my-token",
                  "My-Custom-Header": "foobar"
                };

                axios.post('http://127.0.0.1:8000/api/products', this.product, { headers })
                    .then(response => {
                        this.product = response.data;
                    })
                    .catch(error => {
                        console.log(error.response.data);
                    });
            }
        }
    }
</script>

6. Vue axios post request with full Example

Lets see the axios post request in vue full example here:

<template>
    <div class="container">
        <h2 class="text-center">axios post request example</h2>
        <div class="row">
            <div class="col-md-12">
                <form>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" v-model="product.name">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea type="text" rows="5" class="form-control" v-model="product.description"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Price</label>
                        <input type="number" class="form-control" v-model="product.price">
                    </div>
                    <button type="button" class="btn btn-primary" @click="createProduct()">Create</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                product: {}
            }
        },
        methods: {
            createProduct() {
                const headers = { 
                  "Authorization": "Bearer my-token",
                  "My-Custom-Header": "foobar"
                };

                axios.post('http://127.0.0.1:8000/api/products', this.product, { headers })
                    .then(response => {
                        this.product = response.data;
                    })
                    .catch(error => {
                        console.log(error.response.data);
                    });
            }
        }
    }
</script>

I hope these example help you send axios post request in vuejs.