从具有异步 (AJAX) 调用的方法中返回布尔值答案

【问题标题】：Returning a boolean from a method with an asynchronous (AJAX) call从具有异步 (AJAX) 调用的方法中返回布尔值
【发布时间】：2018-05-03 13:24:15
【问题描述】：

我有一个日历应用程序，其中有一组日期：

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

我正在尝试根据 isWeekend() 方法进行 API 调用的结果添加条件类：

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

方法发出AJAX请求，需要返回true/false，但是方法返回后自然是async调用结束：

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 的 getDay()，例如，来确定周末...这是一个人为的例子来演示技术问题。

【问题讨论】：

标签： vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我希望避免这样的重构，但考虑到当时的情况，以及每个日益复杂的情况，这可能是最明智的做法。