js XMLHttpRequest response data JSON.parse() error
우테캠 4기 2차 코딩테스트를 보는데, 바닐라 js만으로 html을 구현하라 그래서 학생때 배웠던거랑 이것 저것해서 어떻게든 끝내기는 했는데, 어이없는 것 때문에 30분을 날려먹어서 이게 너무 억울해서 글을 써본다
js 로 API를 받을때 XMLHttpRequest 를 썻는데,
분명 콘솔에서는 response 데이터가 json으로 잘 표시가 되면서
JSON.parse() 로 json 변환을 하면 변환이 잘 안되더라
그래서 검색을 여기저기 다 해봤다가
JSON.parse(xml.responseText) 형식으로 변환을 했는데 변환이 안된다.
아니 안맞을 리가 없는데 안맞는단다.
그냥 통으로 console.log(xml.responseText) 했더니
{token : "xxxxx"} 형식으로 잘만 넘어오는데 parse만 하면 안돼길래 이상해서
JSON.parse('{"A" : "B"}') 이런식으로 넘겨봤는데, 이건 또 에러가 안난다.
API에서 값이 {token : "xxxxx"} 형식 이었던것이 문제였다.
무슨소리냐면 key 값에 해당하는 token 이 ""로 묶여있지 않아서 이것을 JSON이라고 인식하지 못한것이다.
해당 사진이 api처럼 부를려고 만들어둔 임시 페이지 이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200 || xhr.status === 201) {
console.log(xhr.responseText);
console.log(xhr.response);
console.log(JSON.parse(xhr.response));
} else {
console.error(xhr.responseText);
}
}
};
// xhr.responseType = 'json'
xhr.open('GET', 'http://127.0.0.1:8080/api');
xhr.send();
|
cs |
그래서 이처럼 xhr로 받았더니 console.log 에서는 오류가 안나는데 JSON.parse만하면 오류가 나서
xhr.responseType = 'json'
이거 한줄 추가해주니까 JSON.parse를 안해줘도 알아서 json으로 잘 알아먹더라...
추가적으로 테스트를 몇번 해봤는데,
xhr.responseType = 'json' 를 사용하면 xhr.responseText 는 호출할 수 없다.
이미 바디를 json으로 파싱했기 때문에 text 형태로는 못불러오는 것으로 보인다.
key와 value 가 둘다 ""로 묶여있다면, 추가작업없이 파싱도되고 text형태 그대로도 불러와 진다.
key와 value 가 둘다 ""로 묶여있지 않다면({key:value} 의 형태) responseType을 지정해줘도 null이 넘어오고,
responseType을 지정해주지 않아도 당연히 파싱을 할 수 없다.
결론
API형식을 잘보자.
key가 ""로 묶여있지 않다면 responseType을 명시해 주어야 한다.
그리고 정말 받을 데이터가 JSON의 형태가 맞다면 그냥 안전하게 responseType을 명시해 주는것이 맞아보인다.