等待中断React应用程序中的功能.为什么

Question

我正在尝试获取数据并在React App中设置状态。尽管获取成功，但正如我可以在Chrome Dev工具中看到的数据一样，执行在以下代码中等待语句停止。仅记录"获取数据"。看起来像是在获取语句返回函数，所有以下所有步骤成功运行。

我在做什么错？非常感谢任何帮助。

import util from "util";
const fetchProm = util.promisify(fetch)
....
getDataFromDb = async () => {
    console.log('getting data')
    let result = await fetchProm("http://localhost:3001/getData")
      .then(data => {
        console.log("then1:",data)
        return data.json()
      })
      .then(res => {
        console.log('then2:', res.data)
        return { data: res.data }
      })
      .catch(err => {
        return { err: err.data }
      });
    console.log("result:", result)
    this.setState({ data: result.data })
  };

Answer 1

您不需要。尝试以下样本：

import util from "util";
const fetchProm = util.promisify(fetch)
getDataFromDb = async () => {
    console.log('getting data')
    let {data} = await fetchProm("http://localhost:3001/getData");
    console.log("result:", data)
    this.setState({ data })
  };

Answer 2

使用异步/等待，您不需要then。另外，您会在第二个捕获错误，而不是第一个。

您可以尝试：

 let result = await fetchProm("http://localhost:3001/getData")
console.log(result)

看看它是否有效？

Answer 3

使用async/await时，请不要忘记使用try/catch处理您的异常将您的代码更改为：

import util from "util";
getDataFromDb = async () => {
    try{
        let {data} = await fetchProm("http://localhost:3001/getData");
        this.setState({ data })
    }
    catch(err=> this.setState({ err: err.data }))
};