[Javascript] fetch 응답 null 체크하기

0. fetch의 response

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. async와 await

응답 데이터를 문자열로 변환한 후 데이터 여부를 확인하고 처리해야하지만 이 응답 데이터는 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() 를 사용해야한다.