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

问题描述 投票:0回答:1

当我从后端得到响应时,我尝试在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。但我仍然很好奇它是如何与承诺一起工作的。

javascript reactjs async-await ecmascript-7
1个回答
0
投票

根据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关键字的动作/语句都将等待它解析然后执行。

© www.soinside.com 2019 - 2024. All rights reserved.