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

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

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인 경우를 적절히 처리할 수 있습니다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발관련 > 자바스크립트 팁' 카테고리의 다른 글

타입스크립트는 왜 Object.keys의 타입을 모를까  (0) 2023.08.20
자바스크립트의 setTimeout은 왜 정확한 타이밍을 보장하지 못할까  (0) 2023.08.03
자바스크립트 parseInt / parseFloat / number를 이용하지 않고 문자열을 숫자로 형변환 하는 구현 방법  (0) 2023.07.11
자바스크립트를 예로 들어서 의존성 역전 원칙(Dependency Inversion Principle, DIP)  (0) 2023.07.10
자바스크립트의 실행 컨텍스트, Lexical Environment 및 관련 컨셉 이해하기  (0) 2023.05.18
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
개발자 Dane
개발자 Dane
IT / 테크 전문 크리에이터 데인 입니다.
개발자 Dane
개발자 Dane의 IT 전문 블로그
개발자 Dane
반응형
  • 분류 전체보기 (170)
    • 개발관련 (24)
      • 프론트엔드 지식 (11)
      • 매일 코딩 테스트 챌린지 (27)
      • 자바스크립트 팁 (32)
      • 리액트 (11)
    • 얼리어답터 (11)
    • 팁 (13)
    • 게임 (18)
      • 디아블로2레저렉션 (16)
    • 운동하는 후니 (2)
전체
오늘
어제

태그

  • 디아블로2
  • 문자열
  • s3
  • javascript
  • 문자열정렬
  • GOS해제
  • 갤럭시성능뻥튀기
  • AWS
  • yarn
  • gos
  • 도커
  • 룬워드방패
  • 코딩테스트
  • Next.js
  • 레저렉션
  • React
  • 아이폰
  • 갤럭시소비자기만
  • 프로그래머스
  • 애플페이
  • 자바스크립트
  • vscode
  • 바바리안
  • 리액트
  • docker
  • PNP
  • 디아블로4
  • Gatsby
  • 갤럭시긱벤치
  • 디아블로2레저렉션

최근 댓글

hELLO · Designed By 정상우.
개발자 Dane
javascript fetch response body가 null인 경우 처리 하는 방법.
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.