代码之家  ›  专栏  ›  技术社区  ›  Synapse explod

在处理按钮的OnClick时,使用异步匿名/箭头功能是不是一种糟糕的做法?

  •  0
  • Synapse explod  · 技术社区  · 1 年前

    正如标题所说。我正在使用React with 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))
    }
    

    让我知道你的想法!

    1 回复  |  直到 1 年前
        1
  •  0
  •   Rafaqfg    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>