在处理按钮的 OnClick 时，使用异步匿名/箭头函数是不好的做法吗？

Question

正如标题所说。我正在使用 React 和 Typescript。我不知道如何进一步解释。

上下文如下：

<button onClick={async () => await addUser(user)}>Submit</button>

async function addUser(user: User) : Promise<void> { 
    await fetch('user', {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            UserId: user.id,
            UserName: user.user_name,
            Email: user.email
        })
    }).then((Resp) => Resp.json())
        .then((Res) => console.log(Res))
}

让我知道你的想法！

Answer 1

在我看来，直接使用异步函数作为 onClick 事件的事件处理程序不一定是不好的做法，但它可能会导致意外的行为，并且在某些情况下可能不是最佳方法。 例如，如果异步函数中发生错误，事件处理程序将无法正确捕获该错误，从而使用户对发生的情况一无所知。 此外，考虑高可扩展性应用程序，您可能会遇到可维护性问题。内联使用异步箭头函数可能会降低代码的可读性，从而使其更难以维护。

处理您的代码片段的更好方法是：

async function addUser(user: User): Promise<void> {
    try {
        const response = await fetch('user', {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                UserId: user.id,
                UserName: user.user_name,
                Email: user.email
            })
        });
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error adding user:', error);
        // Handle error as needed
    }
}


<button onClick={() => addUser(user)}>Submit</button>