无法使用 XMLHttpRequest 从 rest api 获得响应

Question

我想使用 XMLHttpRequest 调用 get rest api，但出现错误 -

“未捕获的语法错误：JSON 输入意外结束”。

rest api json 响应数据

{
    "timestamp": "2018-06-08T16:52:50.509Z",
    "dataFrame": "AQAAKCoAAQgFKgABBg==",
    "fcnt": 825,
    "freq": 865572000,
    "port": 2,
    "rssi": -115,
    "snr": -16,
    "sf_used": 12,
    "id": 1528476770509,
    "dr_used": "SF12BW125",
    "decrypted": true
}

代码

 <script>
        function UserAction() {
    var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "url", true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
        xhttp.send();
    var response = JSON.parse(xhttp.responseText);
}
    </script>

---

编辑：

代码

 <script>
     function userAction() {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(xhttp.responseText);
                var dataFrame = response.dataFrame;
                /** code that handles the response **/
            }
        };
        xhttp.open("GET", "url", true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.setRequestHeader("Authorization", "Basic a2VybmVsc==");
        xhttp.send();
    </script>

HTML

 <button type="submit" onclick="userAction()">Search</button>
   <h1 id="data"></h1>

Answer 1

您应该为您的请求收听XMLHTTPRequest.onreadystatechange 事件，以便仅在请求完成后解析结果：

functio userAction() {
  let xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      let response = JSON.parse(xhttp.responseText);
      document.getElementById("data").innerHTML = response.dataFrame;
    }
  };
  xhttp.open("GET", "filename", true);
  xhttp.setRequestHeader("Content-type", "application/json");
  xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
  xhttp.send();
}

Answer 2

您需要将 xhttp.onreadystate 属性设置为一个回调函数来处理各种状态，然后在收到响应时进行处理。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

Answer 3

您应该在输出之前检查请求的状态。

function UserAction() {
   var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "url", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("Authorization", "Basic a2Vyb==");
    
    xhttp.onload = function(){
        if(xhttp.status ==200){
            var response = JSON.parse(xhttp.responseText);
        }
    }
    
    xhttp.send();
}