javascript fetch-「応答」で「json」を実行できませんでした：ボディストリームがロックされています

リクエストのステータスが400より大きい場合（400、423、429の状態を試しました）、フェッチは返されたjsonコンテンツを読み取ることができません。ブラウザコンソールに次のエラーが表示されます

Uncaught（in promise）TypeError： 'json' on 'Response'：Failed to body stream is locked

返された応答オブジェクトの内容を次のように示しました。

しかし、私はまだ数ヶ月前にそれを使用できます。

私の質問は次のとおりです：

• これはChromeブラウザの動作ですか、それともフェッチ標準の変更ですか？
• これらの状態の本文コンテンツを取得する方法はありますか？

PS：私のブラウザーのバージョンはGoogle Chrome 70.0.3538.102（正式版本）（64位）です

私もこのエラーに遭遇しましたが、それはResponseの状態とは関係がないことがわかりました。本当の問題は、Response.json()1度しか消費できないことです。複数回消費すると、エラーが発生します。

以下のように：

    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 { ---- })
        }
    } 
}