Question

在这里，仅在所有axios请求完成后才需要运行 carResult 函数。将其添加到method2成功中将不起作用，因为组件两次运行了该代码。如果有人可以在所有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

将您所有的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()需要一个promises数组作为参数，而axios.get()方法返回一个promises。

从Promise.all()返回的所有值将按照传递的Promises的顺序进行，而与完成顺序无关。

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

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

1 个答案: