Question

我有一个Vue模板，在其中我进行异步/等待调用以获取所有会话数据，该数据不必呈现，而是以数组的形式发送到另一个组件，而另一个组件将获取该数据信息并生成一些图形。作为测试，我将数组sessionSelected添加到html模板中，以查看其是否正确加载并且工作正常（此数据更改是由选择组件在选择program时触发的）。

不过，我感到困惑的行为可以在下面的listSessions（）方法中看到，在该方法中，console.log（val）位于sessionSelected数组迭代的映射内；

当我检查控制台时，第一次从选择组件（程序）中选择一个选项时，返回的对象为空白，但是当我选择另一个选项时，假设program 6加载了即使在模板中遍历相同的数据对象时，console.log（val）中的先前会话也正确显示了所有会话。（有点像它总是走，后面有一个“滴答声”）

一个可能的提示（如果有帮助的话），我在选择的组件下方的@click元素中添加了<p>，所以当选择程序时，说program 2，然后单击到该<p>标签，console.log确实可以通过“ listSessions”方法正确显示。

我需要能够以这种方式同步sessionSelected数组对象，以便确保在html模板中选择程序时，该方法将检索正确的（会话）数组，例如显示以模板呈现。

<template>
<v-container>
    <v-layout>
        <v-flex lg4 sm12 xs12>
                <GPSelect @input="listTreatments" v-model="patientSelected" :items="tvPatients" label="Patients" />
        </v-flex>
        <v-flex lg4 sm12 xs12>
                <GPSelect @input="listPrograms" v-model="treatmentSelected" :items="treatments" label="Treatments" :disabled="treatments === undefined || treatments.length === 0" />
        </v-flex>
        <v-flex lg4 sm12 xs12>
                <GPSelect @input="listSessions" v-model="programSelected" :items="programs" label="Programs" :disabled="programs === undefined || programs.length === 0" />

            <p @click="listSessions">Session selected {{sessionSelected}}</p>
            <p>ProgramSelected {{programSelected}}</p>

        </v-flex>
    </v-layout>

    <BarChart :label="label" :data="dataSet" :labels="labels" />

</v-container>
</template>

<script>

export default {

    data() {
        return {
            tvPatients: [],
            patientSelected: "",
            treatments: [],
            programs: [],
            sessions: [],
            treatmentSelected: "",
            programSelected: "",
            sessionSelected: [],
            dataSet: [],
            ...       
        }
    },

    created() {
        this.listPatients();
    },

    methods: {

        async listSessions() {

            await this.getSessions();
            this.updateData();

            this.sessionSelected.map(async (val) => {
                console.log( val)
            })

            this.sessionSelected.length = 0;
            this.sessions.length = 0;

        },

        async getSessions() {

            if (this.patientSelected) {

                const response = await SessionService.getSessions(null, "meta");
                if (response.data) {
                    return response.data.map(async (val, index) => {
                        if (val.program_id === this.programSelected) {
                            if (this.sessions != undefined) {

                                this.sessions.push(await SessionService.getSession(val._id, "meta"));
                                this.sessionSelected.push(await SessionService.getSession(val._id, "meta"));

                            }

                        }
                    })
                }

            }
        },
        async listPrograms() {

            this.programs = await this.getPrograms();
        },
        async getPrograms() {

            let response = await PatientService.getPatient(this.patientSelected, "tv");
            if (this.patientSelected) {

                const params = {
                    "treatment-id": response.data.documents[0].document.active_treatment_id
                };

                const programResponse = await ProgramService.getPrograms(params);

                return await programResponse.data.map((val, index) => {
                    return {
                        name: `Program ${(index + 1) } ${response.data.documents[0].document.first_name}`,
                        value: val._id
                    }
                });
            }

        }
    }

}
</script>

我希望this.sessionSelected的映射内的console.log（val）显示与模板中显示的数据相同，而不必将<p>标记与@click事件一起使用，基本上，当从选择组件中选择程序时，将加载关联的数据。

Answer 1

如此多的async / await很难遵循。进行一些处理以解决厄运金字塔的事情不会受到伤害。

这一行引起了我的注意：

return response.data.map(async (val, index) => {

这将返回一系列未解决的承诺。周围的函数getSessions是async，因此它将返回值包装在另一个Promise中。

第await this.getSessions();行将等待该承诺解决。不幸的是，它将立即解决一系列诺言，而无需等待单个诺言的解决。这就是为什么日志记录似乎落后了一步，因为内部承诺尚未完成。

我认为您需要添加Promise.all，以便外部诺言等待诺言的数组。

return Promise.all(response.data.map(async (val, index) => {

vue.js-数据未显示在console.log中，但在模板中可以正常显示

1 个答案: