Question

我已经搜索了很多问题，但仍然找不到解决方法，所以您是我的最后机会...

我有一个Vue组件，需要在创建时从API加载数据，然后在组件中显示这些数据。之前我已经做过，没有任何问题，但是对于我正在制作的它，它不起作用...

<template>
    <thead v-if="loaded">
    <tr>
        <th v-for="label in labels">
            {{label}}
        </th>
    </tr>
    </thead>
</template>

<script>
    import Schema from '../../api/schema'

    export default {
        data() {
            return {
                labels: [],
                loaded: false
            }
        },
        props: {
            fields: Array
        },
        methods: {
            getFieldsLabels: function () {
                return Promise.all(
                    this.fields
                        .map((field) => Schema().getField(field)
                            .then(response => response.getLabel())
                        )
                )
            }
        },
        mounted() {
            this.getFieldsLabels().then(
                response => {
                    this.loaded = true;
                    this.labels = response
                }
            )
        }
    }
</script>

我有多个承诺要传递Promise.all，但是当我在浏览器中按F5键时，页面将保持空白。但是，当它重新加载HMR时，它可以工作...

有什么想法吗？

Answer 1

我认为是因为您尝试使用then的响应then

尝试

        getFieldsLabels: function () {
            return Promise.all(
                this.fields
                    .map((field) => Schema().getField(field))
            )
        }

您需要将getLabel添加到mounted函数中

        this.getFieldsLabels().then(
            response => {
                this.loaded = true;
                this.labels = response.getLabel()
            }
        )

VueJS处理页面加载的多个承诺

1 个答案: