VueJS 在页面加载时处理多个承诺

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()
            }
        )