vue關於接口返回數據存在對象類型引起的一些問題與解決

一、存在問題

在vue生命周期中的create中請求接口數據時

<template>
    <div>{{App.strategys.name}}</div>
</template>

data() {
    return {
        App: {},
　　　　　appName: 'name1',
    }
}
created() {
    if (this.appName) {
      requset.get(url, this.appName).then((res) => {　　//調用接口
　　　　　　this.App = res.data;
　　　})
　　　　console.log(this.App);　　//打印出來為空對象
　　}
},

//接口數據data格式如下
{
　　app_name: 'name1',
　　strategys: {
　　　　name: 'test',
　　　　action: 'action',
　　}
}

此時會報TypeError錯誤：TypeError: Cannot read properties of undefined (reading 'name')

二、問題解決

問題中涉及的知識點有兩個：

1、對象獲取屬性

　　App.strategys.name，此時App的初始值為{},若App無數據，則App.strategys為undefined，但不會報錯，而之后取屬性name就會變成undefined.name，即報錯TypeError。

1、異步與同步問題

　　在create中調用接口，requset.get(url, this.appName) 為Promise，屬於同步任務，但其回調函數then屬於異步任務（中的微任務），此時為App的賦值操作被放到任務隊列中執行，待執行完畢后返回，但此時代碼會繼續往下執行打印App，由於賦值操作尚未執行完畢，此時結果為空對象。而在vue中created之后會對頁面模版template進行渲染，在頁面渲染中存在App.strategys.name，從而報錯。

解決辦法

方法一、在調用接口時使用async，await等待接口返回后繼續執行。

async created() {
    if (this.appName) {
          const {data} = await requset.get(url, this.appName) //調用接口
            this.App = data;
　　　　console.log(this.App);　　//打印出來為空對象
　　}
},

方法二、為模版設置狀態，控制頁面渲染

<template>
    <div v-if="isEmptyObject(App)">{{App.strategys.name}}</div>
</template>
//若app為空則不會渲染