JSON输入的意外结束 - 普通JS答案

【问题标题】：Unexpected end of JSON input - Plain JSJSON输入的意外结束 - 普通JS
【发布时间】：2021-10-22 16:27:45
【问题描述】：

这是一个测试程序，因为我正在学习使用 JSON 和令牌。终点是 Python Flask。它似乎工作正常，即使它在我的页面中显示的内容也很好，只是我在控制台中看到了错误。

代码：

function encodeUser(user, password) {
   var token = user + ":" + password;
   var hash = btoa(token);
   return "Basic " + hash;
}

function login(resultElement) {
    result = document.getElementById(resultElement)
    u = document.getElementById("email").value;
    p = document.getElementById("password").value;
    let xhr = new XMLHttpRequest();
    let url = config_baseurl + "/login"
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type","application/json");
    xhr.setRequestHeader("Authorization", encodeUser(u, p)); 
    xhr.onreadystatechange = function() {
       txt = this.responseText;
       respJson = JSON.parse(txt);
       result.innerHTML = 'response: ' + txt + '<br><br>token: ' + respJson.token;
    };
     xhr.send();
}

结果按预期显示在我的页面中：

response: { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwdWJsaWNfaWQiOiI3ODIxMDVjNi00ZWRhLTQyMjMtYmQ2Yy1hMDhmMzgzNWExZmUiLCJleHAiOjE2MzQ5MjA4NDR9.iHJQf3qGOJlWcSuw-itTk-IirUGUAnmtNKyUXBDnI0Y" }

token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwdWJsaWNfaWQiOiI3ODIxMDVjNi00ZWRhLTQyMjMtYmQ2Yy1hMDhmMzgzNWExZmUiLCJleHAiOjE2MzQ5MjA4NDR9.iHJQf3qGOJlWcSuw-itTk-IirUGUAnmtNKyUXBDnI0Y

控制台显示此错误

未捕获的 SyntaxError：JSON 输入意外结束在 JSON.parse() 在 XMLHttpRequest.xhr.onreadystatechange (example.js:36)

【问题讨论】：

this.responseText 应该是 xhr.responseText。
@zhulien - 我进行了更改并得到了相同的结果。
console.log()responseText。也许你最后有一些 /r/n / /n 工件。
在 result.innerHTML.... 之后添加了以下几行 console.log('txt: ' + txt); console.log('只是令牌：' + respJson.token);
Got the same error then the following output in the log: ''' txt: { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwdWJsaWNfaWQiOiI3ODIxMDVjNi00ZWRhLTQyMjMtYmQ2Yy1hMDhmMzgzNWExZmUiLCJleHAiOjE2MzQ5MzI3OTF9.ZntmMGnMsnlC0Z2V3GJcvoYH_g-lN1JqaR0tvanxz7M" } example.js:38 just the token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9 .eyJwdWJsaWNfaWQiOiI3ODIxMDVjNi00ZWRhLTQyMjMtYmQ2Yy1hMDhmMzgzNWExZmUiLCJleHAiOjE2MzQ5MzI3OTF9.ZntmMGnMsnlC0Z2V3GJcvoYH_g-lN1JqaR0tvanxz7M

标签： javascript json

【解决方案1】：

您可以尝试使用 fetch / promises 吗？使用 XMLHttpRequest 计时很困难。我怀疑 responseText 在您解码 JSON 时实际上没有值

类似的东西

function encodeUser(user, password) {
    const token = user + ":" + password;
    const encoded = btoa(token); // NOTE: Base64 is not hashing!
    return "Basic " + encoded;
}

function login(resultElement) {
    const result = document.getElementById(resultElement);
    const u = document.getElementById("email").value;
    const p = document.getElementById("password").value;

    const url = config_baseurl + "/login";
    const init = {
        method: "POST",
        headers: {
        "Content-Type": "application/json",
        Authorization: encodeUser(u, p),
        },
    };

    fetch(url, init)
        .then(res => res.json())
        .then(data => {
            console.log({ data });
            result.innerText = data.token;
        })
        .catch(console.error);
}

【讨论】：

太棒了！谢谢你的帮助。当事情似乎正常工作时，它总是让我烦恼，但仍然记录错误。此外，非常易读的格式、温和的修正和直截了当的解释。