javascript fetch - Не вдалося виконати 'json' у 'Response': основний потік заблоковано

Коли статус запиту перевищує 400 (я пробував 400, 423, 429 станів), fetch не може прочитати повернутий вміст json. Наступна помилка відображається на консолі браузера

Невпійманий (обіцяно) TypeError: Не вдалося виконати 'json' у 'Response': потік тіла заблоковано

Я показав вміст повернутого об'єкта відповіді наступним чином:

Але я все ще можу використовувати це кілька місяців тому.

Моє запитання таке:

• Це лише поведінка браузера Chrome чи стандартні зміни отримання?
• Чи є спосіб отримати вміст у цих станах?

PS: Моя версія браузера - Google Chrome 70.0.3538.102 （正式 版本） （64 位）

Я теж зустрів цю помилку, але виявив, що вона не пов'язана зі станом відповіді, справжня проблема полягає в тому, що ви можете споживати лише 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()більше одного разу в thenблоці.

Використовуйте Response.clone()для клонуванняResponse

приклад

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

Метод відповіді на зразок 'json', 'text' можна викликати один раз, а потім він блокується. Розміщене зображення відповіді показує, що тіло заблоковано. Це означає, що ви вже називали "тоді", "зловити". Щоб полюбити це, ви можете спробувати наступне.

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

Мав бути (відповідь2 замість використаної відповіді1):

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