개발관련/자바스크립트 팁

javascript fetch response body가 null인 경우 처리 하는 방법.

개발자 Dane 2024. 3. 7. 16:15
반응형

fetch 함수를 사용하여 POST,GET 요청을 보내고 응답 본문(response body)이 null인 경우, response.json()을 호출하면 오류가 발생할 수 있습니다. 이는 response.json() 메소드가 유효한 JSON을 기대하기 때문입니다. 서버가 내용 없는 응답(예: 204 No Content 상태 코드)을 반환하는 경우, 이 메소드를 사용하기 전에 응답에 실제로 JSON 본문이 있는지 확인해야 합니다.

응답 본문이 null일 가능성이 있는 상황을 처리하는 방법은 다음과 같습니다:

 

async function requestAPI() {
    try {
        const response = await fetch({APIURL}, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: {DATA}
        });

        // 성공적인 응답을 받았지만, 본문이 없는 경우를 처리
        if (response.ok && response.status === 200) {
            const contentType = response.headers.get('Content-Type');
            if (contentType && contentType.includes('application/json')) {
                const data = await response.json();
                console.log('Response data:', data);
                return data; // JSON 데이터 반환
            }
            // JSON 본문이 아니거나 본문이 비어있는 경우
            console.log('No response body.');
            return null;
        } else {
            // 응답이 성공적이지 않은 경우 에러 처리
            throw new Error('Network response was not ok');
        }
    } catch (error) {
        console.error('Request failed:', error);
    }
}

// 함수 호출
requestAPI();

 

위 예시처럼 response의 status가 동일하게 200인 경우에도 body가 null인 경우와 body가 있는 경우에 request를 처리할 수 있습니다.

 

예를들면 oauth 2.0 revoke token api가 위처럼 response를 보내옵니다.

 

 

이 방법을 통해 fetch로 요청을 보낼 때 응답 본문이 null인 경우를 적절히 처리할 수 있습니다. 

반응형