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처럼 부를려고 만들어둔 임시 페이지 이다.

 

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();

그래서 이처럼 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을 명시해 주는것이 맞아보인다.