GET-запрос к REST API

http://www.serveraddress.com/api/users/1 является допустимым, и значение имеет правильный формат JSON.

JSON:

{
   "id":1,
   "name":"Ryan Chenkie",
   "email":"[email protected]",
   "battles_won":0,
   "created_at":"2017-02-25 19:20:58",
   "updated_at":"2017-02-25 19:20:58",
   "blobs":[
      {
         "id":1,
         "name":"Blob 1",
         "type":"type A",
         "color":"red",
         "alive":1,
         "level":1,
         "exercise_level":-302,
         "cleanliness_level":-302,
         "health_level":-302,
         "owner_id":1,
         "created_at":"2017-02-25 19:20:58",
         "updated_at":"2017-02-26 01:23:05"
      },
      {
         "id":5,
         "name":"Blob 5",
         "type":"type C",
         "color":"blue",
         "alive":1,
         "level":1,
         "exercise_level":-302,
         "cleanliness_level":-302,
         "health_level":-302,
         "owner_id":1,
         "created_at":"2017-02-25 19:20:58",
         "updated_at":"2017-02-26 01:23:05"
      }
   ]
}

Когда я пытаюсь запустить getUser(), я получаю SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data.

Что не так с моим кодом? Мой setRequestHeader неверен?

getUser(1);

function getUser(userId) {
    var usersUrl = "http://www.serveraddress.com/api/users/";
    var params = userId;
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("GET", usersUrl + params, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);

    return response;

}


person falafel    schedule 26.02.2017    source источник
comment
Что в результате JSON? Я предполагаю, что там есть ошибка.   -  person Psi    schedule 26.02.2017
comment
@Psi Я отредактировал OP, включив в него JSON. Я проверил форматировщик JSON, который сказал, что это действительный JSON.   -  person falafel    schedule 26.02.2017
comment
Проверьте ответ в инструментах браузера или в Fiddler. Убедитесь, что он действительно получает этот JSON в качестве ответа.   -  person JLRishe    schedule 26.02.2017
comment
@falafel Как вы отправляете JSON с сервера. Можете ли вы включить эту часть кода?   -  person Ayush    schedule 26.02.2017


Ответы (1)


Поскольку xmlhttprequest является асинхронным, функция возвращает response (пустой) еще до того, как запрос будет отправлен.
Чтобы получить responseText после завершения запроса, используйте функцию обратного вызова, которая вызывается, когда срабатывает событие load события:

function getUser(userId, callback) {
    var usersUrl = "http://www.serveraddress.com/api/users/";
    var params = userId;
    var xhttp = new XMLHttpRequest(); 
    
    xhttp.addEventListener('load', callback);
    xhttp.addEventListener('error', () => console.log("Request to "+usersUrl+params+" failed"));
    
    xhttp.open("GET", usersUrl + params, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send();
}
getUser(1, function() {
    console.log(JSON.parse(this.responseText));
});

person Villa7_    schedule 26.02.2017