如何根据post http方法响应状态设置state？

Question

当我从后端得到响应时，我尝试在React中设置状态（http post方法）。我要做的是将数据发送到服务器，然后，当resp返回时，我想将isSubmitting属性设置为false。话虽这么说，我的州不依赖于响应数据 - >仅仅依赖于响应状态。如何在响应回来时设置状态？

我不想只是console.log这个内容，我想在内容准备好时制作this.setState({ isSubmitting })。

我想到了类似的东西：if (content) { this.setState({ isSubmitting }) }

但是dunno是正确的。

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

我通过替换Promise的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));

所以现在我可以在最后一行中设置state。但我仍然很好奇它是如何与承诺一起工作的。

Answer 1

根据this的文章，你甚至不需要创建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关键字的动作/语句都将等待它解析然后执行。