Как установитьState в зависимости от статуса ответа метода HTTP? - PullRequest
Новая
       43

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

0 голосов
/ 30 апреля 2019

Я пытаюсь установить состояние внутри React, когда получаю ответ от бэкэнда (http post method). Я собираюсь отправить данные на сервер, а затем, когда вернусь, я хочу установить для свойства 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 на Promises: 

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

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

1 Ответ

0 голосов
/ 30 апреля 2019

Согласно этой статье , вам даже не нужно создавать 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 тела функции, будет ожидать его разрешения и выполнения.

...