带有动态模式的 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>