将 onreadystatechange 回调设置为带参数的 const 箭头函数

Question

我正在遵循这个 ajax 指南 并尝试将步骤 3 中的代码转换为使用 const 的代码。声明，但是，我的readystatechange回调不断被调用，并带有1个readyState。

            const submit = document.getElementById("submit");

            const makeRequest = () => {
                console.log('in makeRequest')
                const httpRequest = new XMLHttpRequest();
                if (!httpRequest) {
                    alert('problem');
                    return false;
                }
                httpRequest.onreadystatechange = () => renderProfile(httpRequest);
                httpRequest.open('GET', 'https://api.github.com/users/kamranahmedse')
            }

            const renderProfile = (httpRequest) => {
                console.log('in renderProfile')
                if (httpRequest.readyState === XMLHttpRequest.DONE) {
                    if (httpRequest.status === 200) {
                        alert('working?');
                    } else {
                        alert('problem')
                    }
                } else {
                    console.log(httpRequest)
                }
            }

            submit.addEventListener('click', makeRequest)

将 onreadystate 回调更改为箭头函数没有任何效果。我认为回调会立即被调用，因为它没有被存储为引用，但我不明白这是怎么回事。

Answer 1

预计状态将更改为 1（然后随着请求经过其他状态而更改更多次）。

当单击名为“提交”的内容时，您正在调用该函数，并且您没有阻止事件的默认行为。

大概这是一个提交按钮，它会导致提交表单并导航到新页面。

离开 Ajax 请求正在运行的页面会取消它，因此它不会进入下一个就绪状态。