Vue中使用fetch()获取数据后无法赋值给实例属性问题求助

嘿，我一眼就看出问题所在啦！你遇到的情况完全是因为fetch是异步操作，代码的执行顺序和你预想的不一样。

为什么属性还是null？ #

当你在mounted钩子中先调用this.getData()，再立刻调用this.consoleLog()时，fetch请求还在后台发送，根本没来得及拿到Star Wars API返回的数据。JavaScript不会因为等待异步请求完成就暂停执行后面的代码，所以consoleLog会先运行，这时候this.name和this.height还是你初始设置的null。

等之后请求完成、数据返回时，这两个属性确实会被更新，但consoleLog早就执行过了，你自然看不到更新后的值。

解决办法有两种，选你顺手的来： #

方法1：在数据返回后再执行日志打印

直接把consoleLog调用放到fetch的then回调里，确保只有当数据成功获取并赋值后，才执行日志：

new Vue({ 
    el: "#app", 
    data: { 
        name: null, 
        height: null 
    }, 
    methods: { 
        getData() { 
            fetch('https://swapi.dev/api/people/1') 
                .then((res) => res.json()) 
                .then((data) => { 
                    console.log(data); 
                    this.name = data.name; 
                    this.height = data.height;
                    this.consoleLog(); // 数据更新后再调用日志方法
                }) 
        }, 
        consoleLog() { 
            console.log(this.name, this.height); 
        } 
    }, 
    mounted() { 
        this.getData() // 只调用getData就行
    } 
})

方法2：用async/await让异步代码看起来像同步

把getData改成异步函数，再在mounted里用await等待请求完成，这样代码逻辑更直观：

new Vue({ 
    el: "#app", 
    data: { 
        name: null, 
        height: null 
    }, 
    methods: { 
        async getData() { // 标记为异步函数
            const res = await fetch('https://swapi.dev/api/people/1'); // 等待请求响应
            const data = await res.json(); // 等待解析JSON
            console.log(data); 
            this.name = data.name; 
            this.height = data.height;
        }, 
        consoleLog() { 
            console.log(this.name, this.height); 
        } 
    }, 
    async mounted() { // 钩子也改成异步
        await this.getData(); // 等待getData执行完成
        this.consoleLog(); // 再打印日志
    } 
})

额外说明 #

其实你对Vue实例属性的赋值逻辑是对的，Vue的响应式系统会在你更新this.name和this.height后自动更新页面渲染。你之前的问题完全是异步代码的执行顺序导致的，和Vue本身的响应式无关~

内容的提问来源于stack exchange，提问作者mjwals