0. 응답 받기
fetch()를 사용하여 서버와의 통신에 성공하면 해당 응답을 받게 됩니다.
그런데 내가 처리하고자 하는 데이터에는 데이터가 없을 때 null을 리턴하는데, 그래서 “SyntaxError: Unexpected end of JSON input” 에러가 난다.
fetch('/test')
.then(res => {
if(!
res.ok) throw new Error();
return res.json();
})
.then(jsonData => {
console.log(jsonData);
})
.catch(() => {
alert('에러가 발생했습니다.
');
})
응답으로 오는 데이터가 null인 경우 text()를 사용하여 문자열로 변환하면 빈 문자열이 반환됩니다.
빈 문자열은 JSON 형식이 아니므로 json() 함수를 사용하면 오류가 발생합니다.
’
1. 비동기 및 대기
응답 데이터를 문자열로 캐스팅한 후에는 데이터인지 확인하고 처리해야 하는데, 이 응답 데이터는 Promise 타입처럼 비동기적으로 처리해야 합니다.
이를 동기식으로 처리하려면 async 및 await 키워드를 사용할 수 있습니다.
fetch('/test')
.then(async res => {
let text = await res.text();
if(text == '') return null;
else return JSON.parse(text);
})
.then(data => {
console.log(data);
})
응답 데이터 res는 이 시점에서 이미 text() 함수로 읽어왔기 때문에 이후에 다시 json()을 사용할 수 없습니다.
문자열 변환 데이터를 JSON 개체로 변환하려면 JSON.parse()를 사용해야 합니다.