Как установить состояние в зависимости от статуса ответа метода http?

Я пытаюсь установить состояние внутри React, когда получаю ответ от бэкэнда (метод http post). Что я собираюсь сделать, так это отправить данные на сервер, а затем, когда ответ вернется, я хочу установить свойство isSubmitting как false. при этом мое состояние не зависит от данных ответа -> только от статуса ответа. Как я могу установить состояние, когда ответ возвращается?

Я не хочу просто записывать этот контент в console.log, я хочу сделать this.setState({ isSubmitting }), когда контент будет готов.

Я подумал о чем-то вроде: if (content) { this.setState({ isSubmitting }) }

но не знаю правильно ли это.

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

Я решил проблему, заменив async/await на обещания:

    return fetch('https://httpbin.org/post', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(blabla)
    })
    .then(resp => resp.json())
    .then(resp => console.log(resp));

Итак, теперь я могу установить состояние в последней строке. Но мне все еще любопытно, как это работает с обещаниями.


reactjs javascript async-await ecmascript-2016
person Daniel Jackowiak    schedule 30.04.2019    source источник
comment
конечно, вы должны использовать this.setState всякий раз, когда хотите обновить что-либо в состоянии компонента. Обратите внимание, что this.setState({ isSubmitting }) установит для свойства isSubmitting состояния любое значение переменной isSubmitting, поэтому убедитесь, что оно определено.   -  person Robin Zigmond    schedule 30.04.2019
comment
Да, я знаю, что setState - это метод. Но КОГДА поставить правильный код? ниже content декларации? Разве это не синхронно, и isSubmitting не будет установлено до того, как будут возвращены фактические данные?   -  person Daniel Jackowiak    schedule 30.04.2019
comment
Да, там. Вы пробовали? Весь смысл await в том, что он ожидает разрешения обещания, что позволяет вам писать асинхронный код, как если бы он был синхронным.   -  person Robin Zigmond    schedule 30.04.2019
comment
Да, я пробовал, но не знал, правильно ли это. Я где-то читал, что он ждет только на включенных частях - в данном случае, content переменная. Но я не хотел использовать content для установки состояния isSubmitting как false.   -  person Daniel Jackowiak    schedule 30.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

Согласно этой статье, вы не даже нужно создать переменную content, и это просто нормально, чтобы проверить, в порядке ли ответ или нет (если вы используете fetch, у него есть встроенное свойство ok).

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  if (rawResponse.ok) {
    this.setState({ isSubmitting: false }); 
  }
})();

Любое действие/инструкция, основанное на ключевом слове await внутри тела функции async, будет ожидать его разрешения, а затем выполняться.

person Roman Batsenko    schedule 30.04.2019