JavaScript问题：在含try/catch的函数中无法修改元素类名与文本内容

嘿，我一眼就看出问题出在哪了——异步操作的时序问题！你的sendEmail函数里调用的Email.send是个异步方法（它返回Promise），但你现在的写法是直接同步返回r，这时候Promise还没完成，r根本还没被赋值成"success"或者"failure"，所以后面修改元素类名和文本的代码用的还是初始的s="undefined"，自然看不到变化啦。

另外还有个小坑：你在catch里写了var r = "failure"，这里的r是catch块的局部变量，和外面的var r不是同一个，就算真的抛出错误，外面的r还是undefined，根本不会被修改。

给你两个可行的修改方案，选哪个都行：

方案一：用Promise链式调用直接处理 #

把修改元素的逻辑放到Promise的then和catch里，这样只有当邮件发送完成（成功或失败）后才会更新页面内容：

<!DOCTYPE html>
<html>
    <head>
        <link rel="icon" type="image/x-icon" href="favicon_sent.ico">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="https://smtpjs.com/v3/smtp.js"></script>
        <title>Email Sent!</title>
    </head>
    <body>
        <p id="status" class="thinking">Processing...</p>
        <script type="text/javascript">
            const st = document.getElementById("status");
            const responses = {
                "undefined": "Processing...",
                "success": "Success!",
                "failure": "Uh-Oh! Something went wrong."
            }
            const classes = {
                "undefined": "thinking",
                "success": "success",
                "failure": "failure"
            }

            function sendEmail() {
                return Email.send({
                    Host: "smtp.gmail.com",
                    Username: "sender@email_address.com",
                    Password: "Enter your password",
                    To: 'receiver@email_address.com',
                    From: "sender@email_address.com",
                    Subject: "Sending Email using javascript",
                    Body: "Well that was easy!!"
                });
            }

            // 发送邮件并处理结果
            sendEmail()
                .then(() => {
                    st.setAttribute('class', classes["success"]);
                    st.innerHTML = responses["success"];
                })
                .catch(() => {
                    st.setAttribute('class', classes["failure"]);
                    st.innerHTML = responses["failure"];
                });
        </script>
    </body>
</html>

方案二：用async/await让代码更像同步写法 #

如果你觉得Promise链式调用看着麻烦，可以用async/await语法，让异步代码读起来更直观：

<!DOCTYPE html>
<html>
    <head>
        <link rel="icon" type="image/x-icon" href="favicon_sent.ico">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="https://smtpjs.com/v3/smtp.js"></script>
        <title>Email Sent!</title>
    </head>
    <body>
        <p id="status" class="thinking">Processing...</p>
        <script type="text/javascript">
            const st = document.getElementById("status");
            const responses = {
                "undefined": "Processing...",
                "success": "Success!",
                "failure": "Uh-Oh! Something went wrong."
            }
            const classes = {
                "undefined": "thinking",
                "success": "success",
                "failure": "failure"
            }

            // 把sendEmail改成async函数
            async function sendEmail() {
                try {
                    await Email.send({
                        Host: "smtp.gmail.com",
                        Username: "sender@email_address.com",
                        Password: "Enter your password",
                        To: 'receiver@email_address.com',
                        From: "sender@email_address.com",
                        Subject: "Sending Email using javascript",
                        Body: "Well that was easy!!"
                    });
                    return "success";
                } catch (err) {
                    return "failure";
                }
            }

            // 用立即执行的async函数包裹调用逻辑
            (async function() {
                const s = await sendEmail();
                st.setAttribute('class', classes[s]);
                st.innerHTML = responses[s];
            })();
        </script>
    </body>
</html>

最后提醒一句：千万不要在前端代码里直接写邮箱密码！这会导致你的账号信息泄露，非常不安全。如果是正式项目，邮件发送逻辑应该放在后端处理哦。

备注：内容来源于stack exchange，提问作者SubnauticaFan