반응형
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 |