在使用 Async 和 Await 解决多个方法后运行代码答案

【问题标题】：Run code after multiple methods resolve with Async and Await在使用 Async 和 Await 解决多个方法后运行代码
【发布时间】：2019-06-17 14:51:34
【问题描述】：

我有三种方法：

isSixCharactersLong(event) {
    const input_len = event.target.value.length;

    if (input_len === 6) {
        this.setState({isSixCharactersLong: true})
    } else {
        this.setState({isSixCharactersLong: false})
    }
}

isAlphanumeric(event) {
    const input_str = event.target.value;

    for (let i = 0; i < input_str.length; i++) {
        const code = input_str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
            !(code > 64 && code < 91) && // upper alpha (A-Z)
            !(code > 96 && code < 123)) { // lower alpha (a-z)
            this.setState({isAlphanumeric: true});
        } else {
            this.setState({isAlphanumeric: false});
        }
    }
}

isEmpty(event) {
    event.target.value ? this.setState({inputIsBlank: false}) : this.setState({inputIsBlank: true});
}

我想做的是在这三种方法解决后运行一个函数。于是我写了以下内容：

async handleValidation(e) {
    this.isAlphanumeric(e);
    this.isEmpty(e);
    this.isSixCharactersLong(e);
}

然后我有了这个由我的 React 应用程序触发的最终方法。

handleOnChange = async (e) => {
    await this.handleValidation(e)
        .then(() => this.setState({code: e.target.value}))
};

我认为这会起作用，但我不断收到 e 为 null 的错误。不知何故，我失去了事件。

我认为问题在于，我没有使用 async 并等待正确的方法。

【问题讨论】：

为什么是 handleValidation 一个async 函数？它没有 await 或 return 任何东西，它调用的函数也不是异步的。
非异步函数没有异步和等待的意义......
最后是眨眼表情
您不熟悉它们并不重要 - 您可以不使用它们。他们在这里根本没有帮助你。只需编写普通函数，您所做的一切除了setState 内部发生的事情现在都是同步的。

标签： javascript reactjs promise async-await es6-promise

【解决方案1】：

您可以将此代码缩减为，

handleOnChange = (e) => {
  const { value } = e.target
  const isAlphanumeric = /^[a-z0-9]+$/i.test(value)
  const isSixCharactersLong = value && value.length === 6
  const inputIsBlank = !!value // or Boolean(value)

  this.setState({ isAlphanumeric, isSixCharactersLong, inputIsBlank })

  if (!inputIsBlank && isAlphanumeric && isSixCharactersLong)
    this.setState({ code: value })
}

/^[a-z0-9]+$/i : 正则表达式不区分大小写地测试字母数字

!!：类型强制转换为布尔值，即如果值为空，则为假，双重否定将其变为真并返回false

编辑

根据 cmets 中的讨论，为了仅在输入有效时设置 code，我添加了一个 if 语句，如果值不为空 (!inputIsBlank) 并且如果value 是字母数字，如果输入长度为六个字符，则将 code 设置为 value。

【讨论】：

为什么不用Boolean(value) 而不是!!value？
个人喜好。为什么使用Boolean(value) 而不是!!value？
Boolean(value) 明确表示构造一个布尔表示 value - !!value 是语法汤，它做同样的事情，但也是两倍的操作。当您考虑Number(value) 而不是+value 或String(value) 而不是"" + value 时，前者还提供了更多的一致性...
我喜欢你的代码。如果验证通过，我正在尝试保存代码。这就是为什么我把它们放在一堆方法中。有什么想法吗？
是的，让我进行编辑。至于Boolean 比!! 快，则要复杂得多，例如：JIT 可以将!! 直接优化为高效的机器码。即使基准测试表明它是正确的，我仍然会在几纳秒的性能提升中使用更简单的语法。在 MDN 文档中同样提到了两者。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 我不会再讨论这个问题了，欢迎您创建自己的问题来解决这个问题。

【解决方案2】：

当什么都不是承诺时，您在两个函数中都使用 async await，这都是同步代码，所以实际上您不需要 async await 来解决这个问题。如果某些事情没有通过，可能会编写您的验证代码以引发错误，然后在 handleOnChange 内部您可以运行三元组

 handleOnChange = (e) => {
    !this.handleValidation(e)? return :
         this.setState({code: e.target.value}))
};

【讨论】：