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

Luna picture Luna · Nov 28, 2018 · Viewed 74k times · Source

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:

enter image description here

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

Answer

Wayne Wei picture Wayne Wei · Feb 17, 2019

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.