[JS/오류해결] Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read

문제 상황

---

fetch를 사용하고, 응답을 받을 때 response.json()을 사용한다. 이때 response.json()을 2번 사용하면 오류가 발생한다. 

콘솔창에서 확인되는 오류

fetch('https://www.naver.com/')
  .then((response) => {
    console.log(response);
    if (response.ok) {
      console.log(response.json()); 
      return response.json(); // 오류 발생
    }
  });

 

 

원인

---

response.json()은 HTTP 응답에서 JSON 데이터를 추출하기 위한 메서드이다. 이 메서드는 해당 HTTP 응답의 body를 읽어서 JSON 객체로 변환해 주는 역할을 한다. 

 

HTTP 응답의 body는 일반적으로 string으로 전송되고, 이 string은 한 번만 읽을 수 있다. 하지만, response.json()을 두 번 사용하는 것은 HTTP 응답의 body를 2번 읽는 것과 같기 때문에 오류가 발생하는 것이다.

 

1. response.json() 1번째 호출

2. HTTP 응답의 body를 읽어서 JSON 객체로 변환

3. response.json() 2번째 호출

4. HTTP 응답의 body는 이전에 읽혔기 때문에 빈 string으로 남아있어, 빈 객체가 반환된다. - 오류 발생

 

따라서 response.json()을 한 번만 호출하거나, 

두 번 호출하는 대신, 첫 번째 호출에서 반환된 JSON 객체를 변수에 저장하여 사용해야 한다. 

 

 

해결 방법

---

해결방법은 간단하다! response.json()을 한 번만 사용하면 된다.

fetch('https://www.naver.com/')
  .then((response) => {
    if (response.ok) {
      return response.json();
    }
  });

참고로, .json()은 Promise를 반환해서 await을 쓰거나 .then을 써야한다. 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖