反跳异步方法答案

【问题标题】：Debounce an async method反跳异步方法
【发布时间】：2019-11-03 07:39:06
【问题描述】：

目标——

向输入添加实时验证，只有验证的 XHR 部分被去抖动。

问题——

将debounce 添加到valueExists() 会破坏await。没有debounce，它是正确的awaits。

应该如何处理？

methods: {
  async validate () {
    let local_errors = [];

    if (!!this.value && !this.$data.alpha_dash.test(this.value)) {
      local_errors.push('Invalid character');
    }

    if (!!this.value && await this.valueExists()) {
      local_errors.push('Already used');
    }

    return local_errors;
  },

  valueExists: _.debounce(function () {
    return axios.get(route('organization.slug.exists', { slug: this.value }))
      .then(response => {
        return false;
      })
      .catch(error => {
        return true;
      });
  }, 1000)
}

【问题讨论】：

那么，当去抖击中时，您希望valueExists 返回什么？
promise 解决后的布尔值。
去抖通过not调用函数来工作。那么你指的是哪个承诺？
你使用哪个库来实现debounce 方法，Underscore？罗达什？
lodash docs 说“对去抖动函数的后续调用返回最后一次 func 调用的结果。”但默认情况下，函数在后沿调用- 所以在最初的几个电话中根本没有任何承诺。

标签： javascript promise vuejs2 lodash debounce

【解决方案1】：

将异步添加到去抖函数应该可以工作：

valueExists: _.debounce(async function () {
    await axios.get(route('organization.slug.exists', { slug: this.value }))
      .then(response => {
        return false;
      })
      .catch(error => {
        return true;
      });
  }, 1000)

【讨论】：

谢谢。现在发生的情况是，validateLocally() 第一次被调用时，valueExists() 仍然是 null。一旦 promise 得到解决，它最终会返回布尔值，但我必须再次调用 validateLocally() 才能看到它。
你可以为初始化的组件使用默认的 false 值，一旦 promise 被解决，会发生什么变化？如果我遵循正确
是的，但是如果它返回true，直到下一个周期我才知道。
为什么？这与他的原始代码所做的事情相同（他正在返回承诺）。