javascript - promise 一次性解决

Question

我的代码中的 Promise 仅在第一次执行时解析，它是带有 reCAPTCHA 验证的简单表单提交。通过调试，我知道浏览器解释器到达了 await captchaVerification() 行并在那里停止。第一次执行没有任何错误。

contactForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    await captchaVerification()
    const data = new FormData(contactForm)
    _alert.innerHTML = 'Sending message...'
    _alert.setAttribute('class', `alert show`);
    ajax(contactForm.method, contactForm.action, data)
        .then(([r, t]) => outcome(r ? r = 'success' : r = 'error', t))
        .catch(e => outcome('error', e))
});

关于 hastebin 的完整上下文:https://hastebin.com/oyuvoyeluv.js

Answer 1

从您发布的链接中，我可以看到在您的 captchaVerification 函数中，您检查之前是否已呈现验证码，如果没有，则呈现并resolve 或 拒绝 promise 。问题是，如果 isRendered 为 true，您永远不会resolve 或 reject。

function captchaVerification() {
    return new Promise((resolve, reject) => {
        captcha.style.display = 'block';

        const verifyCallback = (response) => {
            if (response) {
                captcha.style.display = 'none'
                grecaptcha.reset()
                return resolve(response)
            } else {
                grecaptcha.reset()
                return reject('Invalid captcha verification.')
            }
        }

        // The problem is here as you do nothing if the captcha was 
        // previously rendered.
        if (!isRendered) {
            grecaptcha.render('g-recaptcha', {
                'sitekey': 'my-secret-key',
                'theme': 'dark',
                'callback': verifyCallback
            })
            isRendered = true;
        }
    })
}