await прерывает функцию в приложении React. Зачем?

Question

Я пытаюсь получить данные и установить состояние в приложении React. Пока выборка прошла успешно, как я вижу данные в инструментах chrome dev, выполнение останавливается в выражении ожидания в приведенном ниже коде. Только «получение данных» регистрируется. Похоже, что после оператора fetch функция возвращается, и все следующие шаги выполняются успешно.

Что я делаю не так ?? Любая помощь очень ценится.

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

При асинхронном ожидании вам не нужно then. Также вы ловите ошибки на втором, а не на первом.

Можете ли вы попробовать:

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

console.log(result)

и посмотреть, работает ли он?

Answer 2

При использовании 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 }))
};

Answer 3

вам не нужен обратный вызов, если вы используете async-await. попробуйте ниже образец:

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