在所有axios请求完成后运行vuejs代码

Question

Here I need to run the carResult function only after all axios requests are completed. 在这里，仅在所有axios请求完成后才需要运行carResult函数。 Adding it inside method2 success won't work since component is running the code twice. 将其添加到method2成功中将不起作用，因为组件两次运行了该代码。 It would be great help if someone can help me with a vue code which works after all axios requests. 如果有人可以在所有axios请求之后都可以使用vue代码帮助我，那将是非常有帮助的。

<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/vue@2.5.17/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>

Answer 1

Pass all of your axios calls to Promise.all() which will resolve after all axios calls have been made. 将您所有的axios调用传递给Promise.all() ，在所有axios调用完成后，它将解决。

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. Promise.all()需要一个promise数组作为其参数， axios.get()方法返回一个promise。

All returned values from Promise.all() will be in order of the Promises passed, regardless of completion order. 从Promise.all()返回的所有值将按照传递的Promises顺序进行，而不考虑完成顺序。

More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all 更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

在所有axios请求完成后运行vuejs代码

问题描述

1 个解决方案

解决方案1
2 2019-01-03 10:43:01

在所有axios请求完成后运行vuejs代码

问题描述

1 个解决方案

解决方案1 2 2019-01-03 10:43:01

解决方案1
2 2019-01-03 10:43:01