이번에 작은 프로젝트 하면서 클라이언트를 통해 api쪽에 요청을 보내다가 생긴 이슈인데
웹 개발을 하다 보면 생각지도 못한 오류를 만나게 되는데 바로
'getReader() has already been called for this request' 오류다
핵심부터 말하자면 getReader() 메서드를 딱 한번만 불러라 인데
머리를 싸매면서 시간을 쓴 만큼 오류가 발생하는 이유와 해결 방법에 대해 간단하게 정리해보았다.
1. 오류 발생 원인
getReader() 메서드는 ReadableStream 객체에서 데이터를 읽을 때 사용된다. 하지만 이 메서드는 같은 스트림에서 한 번만 호출될 수 있다. 만약 여러 번 호출하려고 하면 해당 오류가 발생한다.
예를 들어, fetch를 사용하여 데이터를 가져온 뒤 요청의 본문(body)을 여러 번 읽으려고 하면 문제가 발생할 수 있다.
fetch('https://example.com/data')
.then(response => {
response.body.getReader(); // 첫 번째 호출
response.body.getReader(); // 두 번째 호출 - 오류 발생!
});
2. 해결 방법
2.1 스트림 복제
스트림을 복제하여 각 스트림에서 데이터를 읽을 수 있다. response.body를 읽기 전에 response.clone() 메서드를 사용하면 스트림을 복제할 수 있다.
fetch('https://example.com/data')
.then(response => {
const clonedResponse = response.clone();
// 원본 스트림 읽기
response.body.getReader();
// 복제된 스트림 읽기
clonedResponse.body.getReader();});
2.2 JSON 또는 텍스트로 파싱
대부분의 경우, ReadableStream을 직접 다룰 필요 없이 JSON이나 텍스트 형태로 데이터를 읽으면 충분하다.
fetch('https://example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
});
3. 주의할 점
- response.body는 스트림이기 때문에 한 번 소비하면 더 이상 사용할 수 없다. 이를 염두에 두고 설계해야 한다.
- 데이터를 여러 번 소비해야 한다면 반드시 response.clone()을 사용해 스트림을 복제해야 한다.
