Run a vuejs code after all axios requests are completed

Question

Here I need to run the carResult function only after all axios requests are completed. Adding it inside method2 success won't work since component is running the code twice. It would be great help if someone can help me with a vue code which works after all axios requests.

<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </style>
</head>
<body>
    <div id="el">
        <div>
            <p>Selected: {{ input.selected }}</p>
            <select2 :options="options" v-model="input.selected">
                <option disabled value="0">Select one</option>
            </select2>
        </div>
        <div>
            <p>Selected: {{ input.selected2 }}</p>
            <select2 :options="options2" v-model="input.selected2">
                <option disabled value="0">Select one</option>
            </select2>
        </div>
    </div>
    <script type="text/x-template" id="select2-template">
        <select>
        <slot></slot>
        </select>
    </script>
    <script src="http://themestarz.net/html/craigs/assets/js/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
Vue.component('select2', {
    props: ['options', 'value'],
    template: '#select2-template',
    mounted: function () {
        var vm = this;
        $(this.$el)
                // init select2
                .select2({data: this.options})
                .val(this.value)
                .trigger('change')
                // emit event on change.
                .on('change', function () {
                    vm.$emit('input', this.value)
                })
    },
    watch: {
        options: function (options) {
            // update options
            $(this.$el).empty().select2({data: options})
        },
        value: function (value) {
            // update value
            $(this.$el)
                    .val(value)
                    .trigger('change')
        }
    },
    destroyed: function () {
        $(this.$el).off().select2('destroy')
    }
});

var vm = new Vue({
    el: '#el',
    data: {
        input: {
            selected2: "all",
            selected: "all"
        },
        options: [],
        options2: [],
        items: []
    },
    created: function () {
        this.mymethod();
    },
    watch: {
        input: {
            handler(newInput) {
                this.carResult(); 
            },
            deep: true
        },
        itemsArray() {
            this.setPages();
        }
    },
    methods: {
        mymethod: function () {
            var vm = this;
            axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(function (response) {
                        vm.options = [
                            {id: 0, text: 'All'},
                            {id: 1, text: 'Hello'},
                            {id: 2, text: 'World'},
                            {id: 3, text: 'Bye'}
                        ];
                        vm.input.selected = 2;
                        vm.method2();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
        },
        method2: function () {
            var vm = this;
            axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(function (response) {
                        vm.options2 = [
                            {id: 0, text: 'All'},
                            {id: 1, text: 'This'},
                            {id: 2, text: 'is'},
                            {id: 3, text: 'second'}
                        ];
                        vm.input.selected2 = 2;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
        },
        carResult: function () {
            var vm = this;
            axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(function (response) {
                        vm.items = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
        }
    }
});
    </script>
</body>
</html>

cwoods · Accepted Answer · 2019-01-03 10:43:01Z

3

Pass all of your axios calls to Promise.all() which will resolve after all axios calls have been made.

Promise.all([axios.get(url1), axios.get(url2), axios.get(url3)])
  .then((allResults) => {
    console.log("All axios calls have been made!")
})

Promise.all() requires an array of promises as its argument and the axios.get() method returns a promise.

All returned values from Promise.all() will be in order of the Promises passed, regardless of completion order.

More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

answered Jan 3, 2019 at 10:43

cwoods

1111 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Run a vuejs code after all axios requests are completed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related