javascript fetch - Impossibile eseguire "json" su "Response": il flusso del corpo è bloccato

Quando lo stato della richiesta è maggiore di 400 (ho provato gli stati 400, 423, 429), il recupero non può leggere il contenuto json restituito. Il seguente errore viene visualizzato nella console del browser

Uncaught (in promessa) TypeError: impossibile eseguire "json" su "Response": il flusso del corpo è bloccato

Ho mostrato il contenuto dell'oggetto risposta restituito come segue:

Ma posso ancora usarlo qualche mese fa.

La mia domanda è la seguente:

• È solo il comportamento del browser Chrome o le modifiche standard di recupero?
• C'è un modo per ottenere il contenuto corporeo di questi stati?

PS: la versione del mio browser è Google Chrome 70.0.3538.102 （正式 版本） （64 位）

Ho riscontrato anche questo errore ma ho scoperto che non è correlato allo stato di Risposta, il vero problema è che puoi consumarlo solo Response.json()una volta, se lo stai consumando più di una volta, l'errore si verificherà.

come sotto:

    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

    }

Quindi la soluzione è evitare di consumare Response.json()più di una volta in thenblocco.

Usa Response.clone()per clonareResponse

esempio

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

Il metodo di risposta come 'json', 'text' può essere chiamato una volta e poi si blocca. L'immagine della risposta pubblicata mostra che il corpo è bloccato. Ciò significa che hai già chiamato "then", "catch". Per risolvere questo problema puoi provare quanto segue.

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

O

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

So che è troppo tardi ma può aiutare qualcuno:

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

Mi sono anche impegnato in questo. Ma questo ha funzionato per me.

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

in bocca al lupo

Stavo accidentalmente riutilizzando un oggetto risposta, qualcosa di simile a questo:

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);

Questa linea:

const json2 = await response.json();

Avrebbe dovuto essere (risposta2 invece della risposta1 esaurita):

const json2 = await response2.json();

Riutilizzare la risposta precedente non aveva senso ed era un errore di battitura del codice sporco ...

Questo ha funzionato per me

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

Come accennato nella domanda, quando stai cercando di utilizzare lo stesso oggetto di risposta, il tuo corpo sta per bloccarsi a causa dello stato dell'oggetto. Quello che puoi fare è acquisire il valore dell'oggetto risposta e quindi provare a eseguire alcune operazioni su di esso (.then ()). Si prega di seguire il codice qui sotto,

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