javascript - 使用 fetch 检索数据时，Vue JS 组件没有反应

Question

我的 Vue 应用程序有一个奇怪的问题。 该组件如下所示:

...
<template v-for="foo in foos">
   <Elm v-if="foo.visible" :key="foo.label" :bar="foo" />
</template>
...

“Elm”是对象中的值，从 JSON 文件中检索。 如果我在本地获取 JSON 文件，该组件是响应式(Reactive)的:

<script>
    import datas from "datafile.json";
    ...
    methods: {
        fillFoos() {
            datas.forEach(data => {
               this.foos.push(data)
            })
        }
    },
    mounted: {
        this.fillFoos()
   }
   ...
</script>

但是当我使用 fetch 远程检索文件时，该组件不再是响应式(Reactive)的，并且在更改 foo.visible 值时不再消失:

<script>
    methods: {
        getDataFromApi() {
            return new Promise((resolve, reject) => {
                fetch(this.apiUrl)
                .then(response => {
                    return response.json();
                })
                .then(jsonResponse => {
                    resolve(jsonResponse);
                })
                .catch(e => {
                    ...
                })
            })
        },
        fillFoos() {
            this.getDataFromApi()
            .then(response => {
                response.forEach(data => {
                    this.foos.push(data);
                });
            });
        }
    },
    mounted: {
        this.fillFoos()
    }
    ...
</script>

在这两种情况下，“foos”数组都被正确填充，唯一的区别是 v-if 指令在第二种情况下似乎被破坏了。 更准确地说，显示在初始化时正确完成(所有元素的 foo.visible 都为真并且它们都显示)，但如果稍后更改 foo.visible 值，它们不会消失。

我找不到问题所在...

Answer 1

我相信您遇到的问题是方法 getDataFromApi正在返回一个 promise ，但是当你在 fillFoos 中使用它时没有等待 promise ，而是您调用 forEach在上面。

您需要使用 getDataFromApi().then(x => {})解析 promise 的语法，或者您可以使用 async await .

你可以试试这样的东西

methods: {
    async getDataFromApi() {
        const response= await fetch(this.apiUrl);
        return response.json();
    },
    async fillFoos() {
        try {
            await foos = this.getDataFromApi();
            this.foos = foos;
        } catch(error) {
            //handle error.
        }
    }
}