为什么每次400+状态码都会触发onError？

Question

    function postDto(dto) {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", api_url + "/scores/json");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200)
                    postresponse = "Commit successful! View score " + "<a href='" + app_url + "/score/" + scoreName + "'>here</a>";
                else
                    postresponse = "Error: " + xhr.status + " - " + xhr.statusText;
            }
        };
        xhr.onerror = () => postresponse = "An error occurred.";
        xhr.send(JSON.stringify(dto));
    }

我需要在这段代码中发出一些 HTTP 请求。我正在 QML 中为 Musescore 4 编写一个插件。 问题是，任何 400+ 状态代码都会落在 xhr.onerror 上。有关如何正确执行此操作的任何线索吗？

观察：我不得不求助于 XMLHttpRequests，因为它是我知道 QML 可以使用的唯一 HTTP 库。顺便说一下，CORS 已经配置好了。

Answer 1

这里的问题是，任何错误都会触发 xhr.onerror 事件处理程序，包括状态代码在 400+ 范围内的 HTTP 错误响应。 XMLHttpRequest 会出现此行为。

要将 HTTP 错误响应与网络错误分开处理，您可以在 onreadystatechange 事件处理程序中添加另一个条件来检查 HTTP 错误状态代码（状态代码 400 及以上）并单独处理：

function postDto(dto) {
const xhr = new XMLHttpRequest();
xhr.open("POST", api_url + "/scores/json");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            postresponse = "Commit successful! View score " + "<a href='" + app_url + "/score/" + scoreName + "'>here</a>";
        } else if (xhr.status >= 400 && xhr.status < 600) {
            // Handle HTTP error responses
            postresponse = "HTTP Error: " + xhr.status + " - " + xhr.statusText;
        } else {
            // Handle other non-HTTP errors
            postresponse = "An error occurred.";
        }
    }
};
xhr.send(JSON.stringify(dto));

}