帶有動態模式的 vue.js API 調用

Question

我使用 AXIOS 從我的 API 中獲取數據，獲取數據需要一些額外的時間，使用 CREATED 掛鈎點來調用 API。

<template>
 <div>
     Period
    {{This.GetPeriod()}} 
    </div>
</template>


data:function(){
  APIData:{}
},
created :{
   GetData:function(){
       ---- AXIOS get call
   }
},
methods:{
  GetPeriod:function(){
    return this.ApiData.StartDate+":'+ApiData.EndDate 
  }
}

現在我得到以下異常：

1. StartDate 和 Endate 未定義。
2. GetPeriod 方法在 Created 掛鈎之前運行。 這就是未定義 startDate 和 EndDate 的原因。 因為這是數據中的屬性，在 API 調用后將在 APIData 中分配。

3. 我的整個代碼運行了 2 次。

    { "Banners":[{ some properties }], "Links":[{ some properties }], "Widgets":[{ properties }], "Layouts":{ "LayoutName":"Layout4", "ContentDefinitionID":"9", "PlaceHolderID":"", "DisplayOrder":"", "Type":"EmployeeLanding", "StartDate":null, "EndDate":null, "VariantID":"EFDD2115", "Status":null, "Audience":{ "Groups":[], "Segments":[ ], "PopupMode":0, "ErrorMessage":null }, "PopupMode":0, "ErrorMessage":null }

   }

startDate 和 EndDate 位於 Layout 屬性中，所以我需要在我的 Vue.js 上創建架構還是可以動態管理，這樣它就不會出現 undefined 異常。 代碼也運行了 2 次。

Answer 1

您要使用的created的鈎子是一個函數，您可以在文檔Lifecycle-Hooks中看到
您也可以使 GetPeriod 成為計算值，因為它在語義上更合適。

為了不出現錯誤，您可以設置開始日期和結束日期的默認值或在計算期間之前設置默認值，或者您可以檢查是否已定義這些值。 如果不返回破折號或空字符串。

為了使其更加用戶友好，您可以嘗試為您的應用設置加載狀態，並在 xhr 調用完成后填充您的模板並刪除加載程序。

示例用法

<template>
  <div>
   Period: {{period}} 
  </div>
</template>

<script>
data:function(){
  APIData:{}
},
created(){
 this.getData();
},
methods: {
 getData:function(){
    ---- AXIOS get call
 }
},
computed:{
  period:function(){
   let {StartDate, EndDate} = this.ApiData;
   return (StartDate && EndDate) ? `${StartDate} : ${EndDate}` : ''; 
  }
}
</script>