javascript fetch- 'Response'에서 'json'실행 실패 : 본문 스트림이 잠겨 있습니다.

요청 상태가 400 (400, 423, 429 상태를 시도했습니다)보다 크면 fetch에서 반환 된 json 콘텐츠를 읽을 수 없습니다. 브라우저 콘솔에 다음 오류가 표시됩니다.

Uncaught (in promise) TypeError : 'Response'에서 'json'을 실행하지 못했습니다 : 본문 스트림이 잠겨 있습니다.

반환 된 응답 객체의 내용을 다음과 같이 표시했습니다.

하지만 몇 달 전에도 사용할 수 있습니다.

내 질문은 다음과 같습니다.

• 이것은 Chrome 브라우저의 동작입니까 아니면 가져 오기 표준 변경 사항입니까?
• 이러한 상태의 본문 내용을 얻을 수있는 방법이 있습니까?

PS : 내 브라우저 버전은 Google Chrome 70.0.3538.102 （正式 版本） （64 位）입니다.

이 오류도 만났지만 응답 상태와 관련이 없다는 것을 알았습니다. 진짜 문제는 Response.json()한 번만 사용할 수 있다는 것입니다. 두 번 이상 소비하면 오류가 발생합니다.

아래와 같이 :

    fetch('http://localhost:3000/movies').then(response =>{
    console.log(response);
    if(response.ok){
         console.log(response.json()); //first consume it in console.log
        return response.json(); //then consume it again, the error happens

    }

따라서 해결책은 블록 Response.json()에서 두 번 이상 소비하는 것을 피하는 것 then입니다.

Response.clone()복제에 사용Response

예

fetch('yourfile.json').then(res=>res.clone().json())

'json', 'text'와 같은 응답 방법은 한 번만 호출하면 잠 깁니다. 게시 된 응답 이미지는 본문이 잠겨 있음을 보여줍니다. 이것은 당신이 이미 'then', 'catch'를 불렀음을 의미합니다. 이것을 다시 사랑하기 위해 다음을 시도 할 수 있습니다.

fetch(url)
    .then(response=> response.body.json())
    .then(myJson=> console.log(myJson))

또는

fetch(url)
    .catch(response=> response.body.json())
    .catch(myJson=> console.log(myJson))

너무 늦었지만 누군가에게 도움이 될 수 있습니다.

let response = await fetch(targetUrl);
let data = await response.json();

나도 이것에 집착했다. 그러나 이것은 나를 위해 일했습니다.

fetch(YOUR_URL)
.then(res => {
  try {
    if (res.ok) {
      return res.json()
    } else {
      throw new Error(res)
    }
  }
  catch (err) {
    console.log(err.message)
    return WHATEVER_YOU_WANT_TO_RETURN
  }
})
.then (resJson => {
  return resJson.data
})
.catch(err => console.log(err))

행운을 빕니다

실수로 다음과 비슷한 응답 객체를 재사용했습니다.

const response = await new ReleasePresetStore().findAll();
const json = await response.json();
this.setState({ releasePresets: json });

const response2 = await new ReleasePresetStore().findActive();
const json2 = await response.json();
this.setState({ active: json2 });
console.log(json2);

이 줄 :

const json2 = await response.json();

(사용 된 response1 대신 response2) :

const json2 = await response2.json();

이전 응답을 재사용하는 것은 의미가 없었으며 더러운 코드 오타였습니다.

이것은 나를 위해 일했습니다.

response.json().then(data => {
  // use data
})

동일한 응답 객체를 사용하려고 할 때 질문에서 언급했듯이 객체의 상태로 인해 신체가 잠기려고합니다. 할 수있는 일은 응답 객체의 값을 캡처 한 다음 이에 대한 작업 (.then ())을 시도하는 것입니다. 아래 코드를 따르십시오.

fetch('someurl').then(respose) => {
    let somedata = response.json(); // as you will capture the json response, body will not be locked anymore. 
    somedata.then(data) => {
        {
             error handling (if (data.err) { ---- })
        }
        {
             operations (else { ---- })
        }
    } 
}