JavaScript中XMLHttpRequest请求成功却无法读取响应的问题求助

我知晓当前凭证传输方式不安全，后续会处理该问题。

我的问题是：使用XMLHttpRequest调用.NET API时，控制台显示请求成功（状态码200，响应内容为"web.html"），但无法在代码中读取response或responseText，打印结果为空。

我的实现代码如下：

const request = new XMLHttpRequest();
request.open('POST', 'https://someurl.net/api/user/login');
const form = document.getElementById('login')
form.addEventListener('submit', callbackFunction);

function callbackFunction(event) {
    event.preventDefault();

    request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
    request.send(JSON.stringify(formJson(event)));
    console.log(request)

    console.log("Status: " + request.status);
    console.log("Response: " + request.response);
    console.log("ResponseText: " + request.responseText);
};

function formJson(event) {
    const credentialsDto = {};
    const myFormData = new FormData(event.target);
    console.log(myFormData);
    myFormData.forEach((value, key) => (credentialsDto[key] = value));

    return credentialsDto;
}

补充信息：后端.NET API在凭证错误时返回401 Unauthorized，凭证正确时返回200 OK及字符串"web.html"。

我尝试打印request对象的各类属性，还试过以下循环判断的方式，均无法获取响应内容：

while (true)
{
    if (request.readyState == 1)
    {
        console.log("Status: " + request.status);
        console.log("Response: " + request.response);
        console.log("ResponseText: " + request.responseText);
        break;
    }
}

解决方案 #

核心问题是XMLHttpRequest是异步操作，你在调用send()后立刻打印响应，此时请求还在后台处理，根本没完成，自然拿不到数据。那个while循环也完全错误，readyState=1是请求已打开但还没发送的状态，和请求完成毫无关系。

正确做法是监听请求的load事件（或readystatechange事件），等请求完成且状态正常时再读取响应。同时把request对象的创建放到submit回调里，避免多次提交复用同一个请求对象引发问题。

修改后的代码：

const form = document.getElementById('login')
form.addEventListener('submit', callbackFunction);

function callbackFunction(event) {
    event.preventDefault();
    // 每次提交新建一个请求对象
    const request = new XMLHttpRequest();
    request.open('POST', 'https://someurl.net/api/user/login');
    request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    
    // 监听请求完成事件
    request.addEventListener('load', function() {
        if (this.status === 200) {
            console.log("Status: " + this.status);
            console.log("Response: " + this.response);
            console.log("ResponseText: " + this.responseText);
        } else if (this.status === 401) {
            console.log("凭证错误，请检查账号密码");
        }
    });
    
    request.send(JSON.stringify(formJson(event)));
};

function formJson(event) {
    const credentialsDto = {};
    const myFormData = new FormData(event.target);
    myFormData.forEach((value, key) => (credentialsDto[key] = value));
    return credentialsDto;
}

内容的提问来源于stack exchange，提问作者Rogelio