JavaScript获取-无法执行'；json'；在'；答复'；：体流已锁定

当请求状态大于400（我尝试了400423429个状态）时，fetch无法读取返回的json内容。浏览器控制台中将显示以下错误

未捕获（承诺中）TypeError:无法在上执行“json” “响应”：正文流已锁定

我显示了返回的响应对象的内容，如下所示：

但几个月前我还可以用

我的问题如下:

• 这仅仅是Chrome浏览器的行为还是fetch标准的改变
• 有没有办法得到这些状态的身体内容

---

我的浏览器版本是Google Chrome 70.0.3538.102(正式版本） （64 位）

根据MDN，您应该使用：

接口的

clone（）

方法创建一个响应对象的克隆，该对象在各个方面都相同，但存储在不同的变量中。存在

clone（）

的主要原因是允许对象的多次使用（当对象仅为一次使用时）

示例：

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

---

我也遇到过这个错误，但发现它与响应状态无关，真正的问题是您只能使用

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（）
。
响应方法如“json”，“text”可以调用一次，然后锁定。
发布的响应图像显示主体已锁定。
这意味着您已经调用了“then”、“catch”。要重新喜欢它，您可以尝试以下方法

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

或

我无意中重用了一个响应对象，类似于：

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

应该是（响应2而不是用尽的响应1）：

重复使用以前的响应毫无意义，而且是一个肮脏的代码输入错误…
我也坚持这样做。但这对我来说是有效的

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

祝您好运
如问题中所述，当您尝试使用同一响应对象时，由于对象的状态，您的身体将被锁定。您可以做的是捕获响应对象的值，然后尝试对其进行一些操作（.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 { ---- })
        }
    } 
}

这对我有用

response.json（）。然后（数据=>{
//使用数据
})
我知道为时已晚，但它可以帮助某人：

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


fetch（“xxxxxxxxx”）
.then（response=>response.json（））
.then（数据=>{console.log（数据）}）
.catch（错误=>{console.log（错误）}）
这意味着您收到api的响应，但它不是有效的json，您是否在请求中发送了所有必需的参数？@kiranvj我验证了我的数据，相同的内容，我只是将状态代码更改为200以正确获取。我也有同样的问题，但我的状态是200，您最终是如何解决的？200也会出现这种情况。@Kyl我认为每个人的答案都解决了“如何获取数据”的问题问题。但我不认为任何人的答案能告诉我：为什么在我第一次阅读数据时，它会提示我数据已经被读取，所以我没有选择任何人的答案。我希望有人能解释这个问题，谢谢这对我来说非常有效，但有人明白为什么这是必要的吗？我查了一下，我看到了一些一旦读卡器开始读取
Response.body
，它就会被锁定到该读卡器上。但从我所看到的（至少在我的代码中），没有任何东西开始读取……有没有解释过可读流是如何被自动锁定的？我也有同样的问题，但我发现我有“res.json（）”在chrome dev tools中的我的监视面板中，它在代码本身之前被解析！等等，什么？@FelipeDrumond这是一个疯狂的（非）bug！@GeorgeMauer好吧，如果我们只能运行response.json（）一次，并且你的chrome dev tools监视面板在你的代码之前运行它，你会有一个异常，因为你运行了response.json（）两次！参考一个关于在MDN中获取的示例，您可以在使用它之前
response.clone（）
。很好。我有一个
console.log（r.json（））；return r.json（）；
，它破坏了它。谢谢它为我工作了……有人能解释这个奇怪的行为吗？正是我需要用异步/等待语法解决这个问题的，谢谢！
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 { ---- })
        }
    } 
}

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