javascript fetch - Failed to execute 'json' on 'Response': body stream is locked

问题

When the request status is greater than 400(I have tried 400, 423, 429 states), fetch cannot read the returned json content. The following error is displayed in the browser console

Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream is locked

I showed the contents of the returned response object as follows:

But I can still use it a few months ago.

My question is as follows:

Is this just the behavior of the Chrome browser or the fetch standard changes?
Is there any way to get the body content of these states?

PS: My browser version is Google Chrome 70.0.3538.102（正式版本）（64 位）

回答1:

I met this error too but found out it is not related to the state of Response, the real problem is that you only can consume Response.json() once, if you are consuming it more than once, the error will happen.

like below:

    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

    }

So the solution is to avoid consuming Response.json() more than once in then block.

回答2:

Use Response.clone() to clone Response

example

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

回答3:

Response methode like 'json', 'text' can be called once, and then it locks. The posted image of response shows that body is locked. This means you have already called the 'then', 'catch'. To reslove this you can try the following.

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

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

回答4:

I know it's too late but it can help someone:

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

回答5:

I was accidentally reusing a response object, something similar to this:

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

This line:

const json2 = await response.json();

Should have been (response2 instead of the used up response1):

const json2 = await response2.json();

Reusing the previous response made no sense and it was a dirty code typo...

回答6:

I also stuck into this. But this worked for 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))

good luck

回答7:

This worked for me

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

回答8:

As mentioned in the question when you're trying to use same response object, your body is about to locked due to state of the object. What you can do is that capture the value of the response object and then try to have some operation on it (.then()). Please follow the code below,

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

来源：https://stackoverflow.com/questions/53511974/javascript-fetch-failed-to-execute-json-on-response-body-stream-is-locked

标签

javascript

fetch-api