Question

我有一个日历应用，我有一系列日期：

<div v-for="date in dates">{{ date }}</div>

我尝试根据 isWeekend（）方法的结果添加一个条件类，进行API调用：

<div v-for="date in dates" :class="[(isWeekend) ? 'weekend' : '']>{{ date }}</div>

该方法发出一个AJAX请求，并且需要返回true / false，但是在方法返回后，异步调用自然会完成：

methods: {
  isWeekend(date) {
     let thisIsAWeekend = false
     axios.get('http://myapi/' + date).then(response => { 
       if (...) thisIsAWeekend = true
     })
     return thisIsAWeekend // <-- always returns false
  }
}

我已经在返回周围尝试了一个setTimeout，以便给出API调用时间来解析，但该方法仍然总是返回false。

如何应用API调用确定的条件类？

注意：我意识到我可以使用JS＆＃39; getDay()，例如，确定一个周末...这是一个用来证明技术问题的人为例子。

Answer 1

不应同时使用return和async字样。由于它的异步性质，不应该期望该方法返回某些东西。合乎逻辑的做法是在完成工作后从异步调用中提取信息。使用promises，有一个then回调函数，在完成请求时调用。您可以在此处将值更改为布尔值（这意味着更高的变量范围），或者更糟糕的是，您可以发出值已更改的事件，并且所有侦听器都将知道更改。

Answer 2

异步调用不会返回结果，即使您等待它也是如此。它返回一个承诺。您无法在模板中使用承诺，您需要实际值。

最直接的做法是创建一个以date作为道具并且在其上有watch的组件，以进行axios调用并填充isWeekend数据项在组件中。

从具有异步（AJAX）调用的方法返回布尔值

2 个答案: