javascript - XMLHttpRequest 打开函数的异步事件监听器

Question

我正在使用下面的代码向 API 发出 POST 请求并从服务器获取一些数据

    request.open("POST", url, true);
    request.setRequestHeader("Content-type", "application/json; charset=UTF8");
    request.setRequestHeader("X-Accept", "application/json");
    request.send(JSON.stringify(data));

我的问题是如何决定我应该异步还是同步进行。好吧，实际上我对异步的问题是我不确定如何应用一个 eventListener 来监听 XHR 的完成。

如果我使用异步调用，我的 Web 应用程序获取数据的时间太晚，并且应用程序加载了以前的缓存数据，但如果我使用同步调用，则需要大约一秒钟的时间来获取和显示数据，我不确定如何显示“正在加载”图标，因为我不确定将 eventListener 附加到哪里。

谁能说清楚如何正确使用 XHR？

我想提一下，这是我第一次尝试使用 XHR 通过 API 从服务器获取数据。

Answer 1

坚持使用异步，因为它不会卡住浏览器并允许以更优雅的方式处理响应。至于XHR的补全，用这个:

request.open("POST", url, true);
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        // XHR state is DONE
        if (request.status == 200) {
            // HTTP 200 status code (success)
            // HIDE YOUR "LOADING" SPINNER
            // use request.responseText to get the response's content
        }
    }
};
request.setRequestHeader("Content-type", "application/json; charset=UTF8");
request.setRequestHeader("X-Accept", "application/json");
request.send(JSON.stringify(data));
// SHOW YOUR "LOADING" SPINNER

与往常一样，阅读一些相关文档是个好主意:https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest

“我的网络应用程序获取数据的时间太晚，应用程序加载了以前的缓存数据”——我不确定你的意思是什么，但如果你解释更多你上面的代码是如何被调用/使用的，我确信它可以重组以正常协同工作。